前端数据传送至后端（一）

最新推荐文章于 2024-04-19 19:22:57 发布

weixin_34346099

最新推荐文章于 2024-04-19 19:22:57 发布

阅读量235

点赞数

文章标签：后端前端 javascript ViewUI

原文链接：http://www.cnblogs.com/iriliguo/p/6385013.html

版权

   实现效果：输入用户名和年龄，点击按钮，可把数据提交到后台（如上图：数据被提交到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 οnclick="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>

转载于:https://www.cnblogs.com/iriliguo/p/6385013.html

weixin_34346099

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端数据传送至后端（一）

实现效果：输入用户名和年龄，点击按钮，可把数据提交到后台（如上图：数据被提交到myeclipse的console里面）。第一个按钮是用js方法提交，第二个按钮用jquery方法。用到的工具：webstorm+myeclipse <!DOCTYPE html><html lang="en"><head> &l...
复制链接

扫一扫