20 SSM——Ajax的使用
引入
在AJAX技术之前，我们使用请求转发或是重定向来不断获取数据，这两种方式都是页面请求（每次请求获取一整个页面），它消耗的资源高。
现在我们使用ajax，ajax技术是正文请求，只更改网页的部分数据而不重新请求一个新的页面，可以使客户端效率更高。
json
我们将服务器需要返回给客服端的数据封装为json对象，便于传输。
一个json对象的格式如下：
json对象中可以包含字符串对象、数组对象、json对象。
{
“name”：“张三”，
“skills”：["篮球","游泳"]，
"department":{
"id""1",
"name":"人事部"
}
}
配置
引入jar包
maven项目中，在pom.xml文件中添加依赖坐标。此依赖用来对非基础数据类型的数据进行格式转化，在使用springmvc的方式返回对象后，会将返回的对象通过此jar包转化为json对象。
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.10.1</version>
</dependency>
引入驱动
需要配置驱动才可使用上面的jar包，只需在springMVC的配置文件中添加下面的代码即可。
<!-- 注解驱动:加了它就能解析json --> <mvc:annotation-driven></mvc:annotation-driven>
使用
举个例子，我们验证一个登录网页传来的账号密码是否正确。
在Controller中：
@RequestMapping("login.do")
@ResponseBody
public JsonResult login(String username,String password) {
JsonResult jr = new JsonResult();
if("root".equals(username)) {
if("1234".equals(password)) {
jr.setState(3);//登陆成功
}else {
jr.setState(2);//密码不正确
}
}else {
jr.setState(1);//用户不存在
}
return jr;
}
其中的JsonResult是我们自定的一个类，用来封装返回的数据，由于它是非基础数据类型的数据，所以它将通过Jackson-databind.jar转化为json数据返回给客户端。
JsonResult类。
public class JsonResult {
private Integer state;
public Integer getState() {
return state;
}
public void setState(Integer state) {
this.state = state;
}
}
由于添加了@ResponseBody注解，在不使用ajax接收的情况下，我们将看到类似这样的返回页面：
可以看到java对象转为了json对象
使用AJAX
接下来，我们就使用ajax接收返回的数据。
- 首先，我们先引用jQuery。
- 再对登录页面的登录按钮设置login()方法（登录按钮的type属性改为button），用于ajax的示范。
- 然后使用$.ajax()进行请求与响应的数据接收和处理
下面的$.ajax({..})即ajax的常规固定写法，包含常用的五个参数：
- url：本次请求的url
- type：相当于form标签的method，取值：post,get
- date：向服务器发送的数据，键值对之间使用&拼接,我们可以使用form表单的id来调取各值自动拼接，假设form的id为from-id，则这里可写为："data":$("#form-id").serialize()
- dateType：返回数据类型，非常重要。相当于content-Type，一般取值有html、text（返回文本）、json（返回json对象）等
- success：值为一个回调函数，只有当响应200状态码也就是成功时，才回执行回调函数。该函数的参数为服务器返回的数据对象，参数名可自定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
function login(){
let username = $("#username").val();
let password = $("#password").val();
$.ajax({
"url":"login.do",
"type":"post",
"data":"username="+username+"&password="+password,//推荐：“data”:$("#form-id").serialize(),但标签的name值需要与接收的对象属性保持一致
"dataType":"json",
"success":function(result){//这里的result对象即为刚才的JsonResult被转为Json后的对象。
if(result.state==1){
alert("用户不存在");
}else if(result.state==2){
alert("密码错误");
}else{
alert("登陆成功");
}
}
})
}
</script>
</head>
<body>
<form id="form-id" action="login.do" method="post">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" id="password" name="password"></td>
</tr>
<tr>
<td><input type="button" value="登录" onclick="login()"/></td>
</tr>
</table>
</form>
</body>
</html>
演示
