zoukankan      html  css  js  c++  java
  • 前端数据传送至后端(一)

       实现效果:输入用户名和年龄,点击按钮,可把数据提交到后台(如上图:数据被提交到myeclipse的console里面)。
    第一个按钮是用js方法提交,第二个按钮用jquery方法。
    用到的工具:webstorm+myeclipse
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.1.1.min.js"></script>
    </head>
    <body>
    用户名:<input type="text" id="name"><br>
    年龄: <input type="text" id="age"><br>
    <button onclick="get()">传数据到后端</button>
    <button id="jquery">jquery的ajax提交</button>
    <script>
    //js传送方法
    function get() {
    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;
    var xml = new XMLHttpRequest();
    xml.open("get","http://localhost:8080/Test/servlet/TestServlet?one="+name+"&two="+age,true);
    xml.onreadystatechange = function () {

    };
    xml.send();
    }

    //jquery提交的ajax
    $("#jquery").click(function () {
    var name = $("#name").val();
    var age= $("#age").val();
    //第一种传参数的写法
    $.get("http://localhost:8080/Test/servlet/TestServlet?one="+name+"&two="+age,function (data) {
    console.log(data);
    })
    //第二种传参数的写法
    $.get("http://localhost:8080/Test/servlet/TestServlet",{one:name,two:age},function (data) {
    console.log(data);
    })
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    ie兼容问题整理
    jQuery Easing 使用方法及其图解
    前端模块化学习
    velocity常用语句速查表
    table插件实现
    表单自动提交问题整理
    移动端开发
    工具的使用及配置
    《TCP/IP详解 卷1:协议》读书笔记
    iOS 内存泄漏
  • 原文地址:https://www.cnblogs.com/iriliguo/p/6385013.html
Copyright © 2011-2022 走看看