AJax和JQ的结合使用

第一种经典模式

<%--
  Created by IntelliJ IDEA.
  User: 60590
  Date: 2019/12/4
  Time: 16:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>e</title>
    <base href=<%= request.getContextPath()%>/>
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        function test() {
            //经典模式
            $.ajax({
                //请求方式
                type: "get",
                //请求地址
                url: "servlet/JqAjaxServlet",
                //传入的参数
                data:"uname=zhangsan",
                //是否异步
                async:true,
                //返回的类型
                dataType:"json",
                //响应成功
                success:function (result) {
                    console.log(result)
                    console.log(result.id)

                },
                error:function () {
                    alert("ajax失败")
                }

            })
        }
    </script>
</head>
<body>
<button onclick="test()">ajax</button>
</body>
</html>

  里面的属性比较的多,支持我们发送ajax 的个各种的需求

2.精简方式

//精简版的
$.get("servlet/JqAjaxServlet","name=sxt",function (reslut1) {
console.log(reslut1.id);
console.log(reslut1)
},"json")
$.post("servlet/JqAjaxServlet","name=sxt",function (reslut1) {
console.log(reslut1.id);
console.log(reslut1)
},"json")

 还有一个重要的属性 提交给后台大量表单数据时

serialize(); 这个方法 获得这种模式的就可以给后台发送了uname=22222&pwd=22222&score=222
function demo2() {
//得到表单的所有值
var val=$("form").serialize();

console.log(val);
//获得这样的值就看可以给后台发送了 uname=22222&pwd=22222&score=222
}
原文地址:https://www.cnblogs.com/ww103/p/11985134.html