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>