一、AJAX介绍
使用ajax发送请求传递数据最常见的就是使用以下两种数据格式进行传递
- 一种是form方式传递数据（默认的）：contentType: "application/x-www-form-urlencoded"
- 一种是JSON方式传递数据：contentType: "application/json;charset=UTF-8"
二、使用 application/x-www-form-urlencoded 交互
- 前台传递 ：这是 form 格式进行传递的（也是form表单的数据传递形式）
- 后台接收 ：使用任何以request.getParameter("username")为原型的方式都可以接收
我这里使用的是Spring MVC的形式，所以直接遵循MVC注解的各种形式接值就好（使用的是从请求中getParameter）
html
<table border="1">
<tr>
<td>
<h2>（2）AJAX 获取form表单参数,发送请求到controller</h2>
<h2>【contentType: "application/x-www-form-urlencoded"】</h2>
<ul type="dise">
<li><b>submit2_1: </b>【前台：使用$('#form2').serialize()获取表单参数并传递】【后台：@RequestParam接收】</li>
<li><b>submit2_2: </b>【前台：使用$("#username2").val()获取表单参数，以{"username":username,"password":password}形式传递】【后台：@RequestParam接收】
</li>
<li><b>submit2_3: </b>【前台：使用$('#form2').serialize()获取表单参数并传递】【后台：POJO接收】</li>
</ul>
<h5 id="responseBodyValue2"></h5>
<%--注意：这里 onsubmit 设置为 return false 是为了屏蔽form的提交（很重要）--%>
<%--必须返回false，否则表单会自己再做一次提交操作，并且页面跳转--%>
<form id="form2" οnsubmit="return false">
<table border="1">
<tr>
<td>userame:</td>
<td><input id="username2" name="username" type="text"></td>
</tr>
<tr>
<td>password:</td>
<td><input id="password2" name="password" type="password"></td>
</tr>
<tr>
<td colspan="2">
<button οnclick="testAjax2_1()">submit2_1</button>
<button οnclick="testAjax2_2()">submit2_2</button>
<button οnclick="testAjax2_3()">submit2_3</button>
<button type="reset">reset</button>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>javascript
<script>
// 【前台：使用$('#form2').serialize()获取表单参数并传递】【后台：@RequestParam接收】
function testAjax2_1() {
alert("testAjax2_1");
$.ajax({
url: '${pageContext.request.contextPath}/user/ajaxRequestFunction2',
type: 'POST',
contentType: "application/x-www-form-urlencoded",//这是默认值，可以不写
data: $('#form2').serialize(),
success: function (data) {//data是返回的参数(响应)
alert("success:" + data);
$("#responseBodyValue2").html(data);
},
error: function () {
alert("fail");
}
});
alert("end(testAjax2_1)");
}
// 【前台：使用$("#username2").val()获取表单参数，以{"username":username,"password":password}形式传递】【后台：@RequestParam接收】
function testAjax2_2() {
alert("testAjax2_2");
var username = $("#username2").val();
var password = $("#password2").val();
console.log("username=" + username + "~~~~~~~password=" + password);
$.ajax({
url: '${pageContext.request.contextPath}/user/ajaxRequestFunction2',
type: 'POST',
contentType: "application/x-www-form-urlencoded",//这是默认值，可以不写
data: {"username": username, "password": password},
success: function (data) {//data是返回的参数(响应)
alert("success:" + data);
$("#responseBodyValue2").html(data);
},
error: function () {
alert("fail");
}
});
alert("end(testAjax2_2)");
}
// 【前台：使用$('#form2').serialize()获取表单参数并传递】【后台：POJO接收】
function testAjax2_3() {
alert("testAjax2_3");
$.ajax({
url: '${pageContext.request.contextPath}/user/ajaxRequestFunction2_3',
type: 'POST',
contentType: "application/x-www-form-urlencoded",//这是默认值，可以不写
data: $('#form2').serialize(),
success: function (data) {//data是返回的参数(响应)
alert("success:" + data);
$("#responseBodyValue2").html(data);
},
error: function () {
alert("fail");
}
});
alert("end(testAjax2_3)");
}
</script>controller
/**
* (2)AJAX 获取form表单参数,发送请求到controller
* 请求类型【contentType: "application/x-www-form-urlencoded"】
* 传递多个input参数
* testAjax2_1();testAjax2_2() 请求到该方法
* 遵循spring mvc使用request.getParameter的机制（如果名称匹配也可以不使用@RequestParam注解）
*/
@RequestMapping(path = "/ajaxRequestFunction2", method = RequestMethod.POST)
@ResponseBody
public String ajaxRequestFunction2(@RequestParam("username") String username,@RequestParam("password") String password ) {
System.out.println("[2] ajaxRequest Function");
System.out.println("username:"+username+"-----------password:"+password);
return "[2] ajaxRequest Function";
}
/**
* (2_3)AJAX 获取form表单参数，发送请求到controller
* 请求类型【contentType: "application/x-www-form-urlencoded"】
* testAjax2_3() 请求到该方法
* 遵循spring mvc的机制，会自动将数据映射到POJO对象（前提是数据匹配，否则报错）
*/
@RequestMapping("/ajaxRequestFunction2_3")
@ResponseBody
public String ajaxRequestFunction2_3(LoginRequest data) {
System.out.println("[2] ajaxRequest Function");
System.out.println(data);
return "[2] ajaxRequest Function";
}三、使用application/json交互
所有数据都以 json 格式请求传递，需要做一下配置
- 配置请求传递类型为contentType: "application/json;charset=UTF-8"
- 使用data: JSON.stringify(data),将数据转换为JSON格式
- 在做转换的时候 springmvc 需要添加Jackson依赖
- controller使用@RequestBody注解来接收数据，并将数据映射进pojo
springmvc使用Jackson依赖去对POJO进行数据映射
<!--使用AJAX传递json，@RequestBody接收，需要添加Jackson的依赖-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.8.4</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.8.4</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.4</version>
</dependency>html
扫描二维码关注公众号，回复：
9415425 查看本文章
<table border="1">
<tr>
<td>
<h2>（3）AJAX 发送请求到controller【使用@RequestBody接收】</h2>
<h2>【contentType: "application/json;charset=UTF-8"】</h2>
<ul type="dise">
<li><b>submit3_1: </b>【前台：ajax发送form表单的参数】【后台：使用POJO接收<font color="red">（注意：需要Jackson依赖的支持）</font>】
</li>
<li><b>submit3_2: </b>【前台：ajax传递int数组】【后台：可以使用 List 或 数组 接收<font color="red">（注意：一定要写泛型，泛型的类型必须和前台传递的数据类型匹配，否则报错）</font>】
</li>
<li><b>submit3_3: </b>【前台：ajax传递String数组】【后台：可以使用 List 或 数组 接收<font color="red">（注意：一定要写泛型，泛型的类型必须和前台传递的数据类型匹配，否则报错）</font>】
</li>
<li><b>submit3_4: </b>【前台：ajax传递Map】【后台：可使用Map集合接收。<font color="red">(注意：必须有泛型并且数据类型必须匹配，不然报错)</font>】
</li>
<li><b>submit3_5: </b>【前台：ajax传递pojo自定义复杂类型json】【后台：可使用POJO集合接收。<font color="red">(注意：所有类型必须匹配，不然报错)</font>】
</li>
</ul>
<form id="form3" οnsubmit="return false">
<table border="1">
<tr>
<td>userame:</td>
<td><input id="username3" name="username3" type="text"></td>
</tr>
<tr>
<td>password:</td>
<td><input id="password3" name="password3" type="password"></td>
</tr>
<tr>
<td colspan="2">
<button type="submit" οnclick="testAjax3_1()">submit3_1</button>
<button type="reset">reset</button>
</td>
</tr>
</table>
<button type="submit" οnclick="testAjax3_2()">submit3_2</button>
<button type="submit" οnclick="testAjax3_3()">submit3_3</button>
<button type="submit" οnclick="testAjax3_4()">submit3_4</button>
<button type="submit" οnclick="testAjax3_5()">submit3_5</button>
</form>
<table id="show3_5data" border="1">
<thead>
<tr>
<td colspan="2">ajax 复杂数据请求，返回json数据并显示参数(testAjax3_5())</td>
</tr>
</thead>
<tbody>
<tr>
<td>uid</td>
<td name="uid">aa</td>
</tr>
<tr>
<td>uname</td>
<td name="uname">bb</td>
</tr>
<tr>
<td>udescriptor</td>
<td name="udescriptor">bb</td>
</tr>
<tr>
<td>number</td>
<td name="number">bb</td>
</tr>
<tr>
<td>map</td>
<td name="map">bb</td>
</tr>
<tr>
<td>tlist</td>
<td name="tlist">bb</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>javascript
<script>
<%--获取form参数，传递POJO--%>
function testAjax3_1() {
alert("testAjax3_1");
console.log("testAjax3_1");
var username = $("#username3").val();
var password = $("#password3").val();
var data = {"username": username, "password": password};
console.log(JSON.stringify(data));
$.ajax({
url: '${pageContext.request.contextPath}/user/ajaxRequestFunction3_1',
type: 'POST',
contentType: "application/json;charset=UTF-8",//数据设置为JSON格式传递
data: JSON.stringify(data),
success: function (data) {//data是返回的参数(响应)
alert("success:" + data);
},
error: function () {
alert("fail");
}
});
}
<%--前台传递int数组，后台可使用List 或 集合接收。注意：必须有泛型并且数据类型必须匹配，不然报错--%>
function testAjax3_2() {
alert("testAjax3_2");
console.log("testAjax3_2");
var array = [];
for (var i = 0; i < 5; i++) {
array.push(i);
}
var data = array;
console.log(JSON.stringify(data));
$.ajax({
url: '${pageContext.request.contextPath}/user/ajaxRequestFunction3_2',
type: 'POST',
contentType: "application/json;charset=UTF-8",//数据设置为JSON格式传递
data: JSON.stringify(data),
success: function (data) {//data是返回的参数(响应)
alert("success:" + data);
console.log("success:" + data);
},
error: function () {
alert("fail");
console.log("fail");
}
});
}
<%--前台传递String数组，后台可使用List 或 集合接收。注意：必须有泛型并且数据类型必须匹配，不然报错--%>
function testAjax3_3() {
console.log("testAjax3_3");
var array = [];
for (var i = 0; i < 5; i++) {
array.push(i + "a");
}
var data = array;
console.log(JSON.stringify(data));
$.ajax({
url: '${pageContext.request.contextPath}/user/ajaxRequestFunction3_3',
type: 'POST',
contentType: "application/json;charset=UTF-8",//数据设置为JSON格式传递
data: JSON.stringify(data),
success: function (data) {//data是返回的参数(响应)
alert("success:" + data);
},
error: function () {
alert("fail");
console.log("fail");
}
});
}
<%--前台传递Map，后台可使用Map集合接收。注意：必须有泛型并且数据类型必须匹配，不然报错--%>
function testAjax3_4() {
alert("testAjax3_4");
console.log("testAjax3_4");
var map = {aa: "11", bb: "22", cc: "33"};
var data = map;
alert(JSON.stringify(data));
console.log(JSON.stringify(data));
$.ajax({
url: '${pageContext.request.contextPath}/user/ajaxRequestFunction3_4',
type: 'POST',
contentType: "application/json;charset=UTF-8",//数据设置为JSON格式传递
data: JSON.stringify(data),
success: function (data) {//data是返回的参数(响应)
alert("success:" + data);
console.log("success:" + data);
},
error: function () {
alert("fail");
console.log("fail");
}
});
}
<%--pojo自定义复杂类型json--%>
function testAjax3_5() {
alert("testAjax3_5");
console.log("testAjax3_5");
// var data={
// "uid": 1,
// "uname": "张三",
// "udescriptor": "===",
// "number": [1, 2, 3, 44],
// "map": {
// "aa": {
// "tid": 11,
// "tname": "张三1",
// "tdescriptor": "==="
// },
// "bb": {
// "tid": 22,
// "tname": "张三2",
// "tdescriptor": "==="
// }
// },
// "tlist": [{
// "tid": 11,
// "tname": "张三1",
// "tdescriptor": "==="
// }, {
// "tid": 22,
// "tname": "张三2",
// "tdescriptor": "==="
// }]
// };
var data = {
uid: 1,
uname: '张三',
number: [1, 2, 3, 44],
map: {
"aa": {tid: 11, tname: "张三1", tdescriptor: "==="},
"bb": {tid: 22, tname: "张三2", tdescriptor: "==="}
},
tlist: [{tid: 11, tname: "张三1", tdescriptor: "==="}, {
tid: 22,
tname: "张三2",
tdescriptor: "==="
}]
};
alert(JSON.stringify(data));
console.log(JSON.stringify(data));
$.ajax({
url: '${pageContext.request.contextPath}/user/ajaxRequestFunction3_5',
type: 'POST',
contentType: "application/json;charset=UTF-8",//数据设置为JSON格式传递
data: JSON.stringify(data),
dataType:'json',//dataType是设置返回参数的类型
success: function (data) {//data是返回的参数(响应)
alert("success:" + data);
console.log("success:" + data);
$("#show3_5data td[name=uid]").html(data.uid);
$("#show3_5data td[name=uname]").html(data.uname);
$("#show3_5data td[name=udescriptor]").html(data.udescriptor);
$("#show3_5data td[name=number]").html(data.number);
$("#show3_5data td[name=map]").html(data.map);
$("#show3_5data td[name=tlist]").html(data.tlist);
},
error: function () {
alert("fail");
console.log("fail");
}
});
}
</script>controller
/**
* (3)AJAX 发送请求到controller【使用@RequestBody接收】
* 请求类型【contentType: "application/json"】
* @param loginRequest
* @return
*/
@RequestMapping("/ajaxRequestFunction3_1")
@ResponseBody
public String ajaxRequestFunction3_1(@RequestBody LoginRequest loginRequest ) {
System.out.println("[3_1] ajaxRequest Function");
return "[3_1] ajaxRequest Function";
}
@RequestMapping("/ajaxRequestFunction3_2")
@ResponseBody
public String ajaxRequestFunction3_2(@RequestBody List<Integer> data ) {
System.out.println("[3_2] ajaxRequest Function");
System.out.println(data);
return "[3_2] ajaxRequest Function";
}
@RequestMapping("/ajaxRequestFunction3_3")
@ResponseBody
public String ajaxRequestFunction3_3(@RequestBody String[] data ) {
System.out.println("[3_3] ajaxRequest Function");
System.out.println(data);
return "[3_3] ajaxRequest Function";
}
@RequestMapping("/ajaxRequestFunction3_4")
@ResponseBody
public String ajaxRequestFunction3_4(@RequestBody Map<String,String> data ) {
System.out.println("[3_4] ajaxRequest Function");
System.out.println(data);
return "[3_4] ajaxRequest Function";
}
@RequestMapping("/ajaxRequestFunction3_5")
@ResponseBody
public UserRequest ajaxRequestFunction3_5(@RequestBody UserRequest data ) {
System.out.println("[3_5] ajaxRequest Function");
System.out.println(data);
return data;
}controller请求和响应对象（因为有pojo对象传递，并且需要@RequestBody映射）
package com.marvin.demo.controller.request;
public class LoginRequest {
private String username;
private String password;
//...此处省略get，set
}package com.marvin.demo.controller.request;
import java.util.List;
import java.util.Map;
public class UserRequest {
private Integer uid;
private String uname;
private String udescriptor;
private Integer[] number;
private Map<String,TypeRequest> map;
private List<TypeRequest> tlist;
//...此处省略get，set
}
package com.marvin.demo.controller.request;
public class TypeRequest {
private Integer tid;
private String tname;
private String tdescriptor;
//...此处省略get，set
}