【AJAX】通过JQuery使用AJAX

1 $.ajax方法

常用的属性：

• url：表示请求的地址

• type：表示请求的类型GET或POST请求

• data：表示发送给服务器的数据。格式有两种name=value&name=value或{key:value}

• success：请求成功后，收到服务器响应的回调函数。括号中的参数类型由dataType属性决定。

• dataType：响应的数据类型。常用的数据类型有text（纯文本）、xml（xml数据）、json（json对象）

$.ajax({
    // url
    url: 'http://127.0.0.1:8000/book/ajaxServlet',
    // 请求类型
    // type: 'GET',
    type: 'POST',
    // 参数
    // data: "action=ajaxRequest",
    data: { "action", "ajaxRequest"},
    // 响应成功的回调函数
    success: function (data) {
        console.log(data);
    },
    // 响应体数据类型
    dataType: 'json',
});

2 $.get 和 $.post方法

有的属性与$.ajax同名不同义，注意区分

• url：请求的地址
• data：发送的数据
• callback：成功的回调函数
• type：返回的数据类型

$.get('http://127.0.0.1:8000/ajaxServlet', {"action", "getRequest"}, function (data) {
    console.log(data);
}, 'json');

$.post('http://127.0.0.1:8000/ajaxServlet', {"action", "postRequest"}, function (data) {
    console.log(data);
}, 'json');

3 $.getJSON方法

$.getJSON是一个get类型的请求，响应的数据类型是json。

• url：请求的地址
• data：发送的数据
• callback：响应成功的回调函数

$.getJSON("http://localhost:8080/book/ajaxServlet","action=jQuerySerialize",function(data){
	console.log(data);
});

4 表单序列化 serialize()

serialize()可以获取表单中所有的表单项内容，并且已name=value&name=value的形式进行拼接。

// form1为表单的id属性
$("#form1").serialize()

// 通过$.getJSON进行ajax交互
$.getJSON("http://localhost:8080/book/ajaxServlet","action=jQuerySerialize&"+$("#form1").serialize(),function(data){

});

服务器端的代码。（可以使用servlet做服务端，也可以使用express框架做服务端）

protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse){
// 还是通过req.getParameter()方法获取$.getJSON提交的参数
String username = req.getParameter("username");
String password = req.getParameter("password");

// 通过这个方法向客户端返回一个数据
// resp.getWriter().writer(json字符串)
}

参考资料

【1】尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版
【2】相关演示代码（码云）