20 SSM——Ajax的使用

引入

在AJAX技术之前，我们使用请求转发或是重定向来不断获取数据，这两种方式都是页面请求（每次请求获取一整个页面），它消耗的资源高。

现在我们使用ajax，ajax技术是正文请求，只更改网页的部分数据而不重新请求一个新的页面，可以使客户端效率更高。

json

我们将服务器需要返回给客服端的数据封装为json对象，便于传输。

一个json对象的格式如下：

json对象中可以包含字符串对象、数组对象、json对象。

{
  “name”：“张三”，
  “skills”：["篮球","游泳"]，
  "department":{
  "id""1",
  "name":"人事部"  
}    
}

配置

引入jar包

maven项目中，在pom.xml文件中添加依赖坐标。此依赖用来对非基础数据类型的数据进行格式转化，在使用springmvc的方式返回对象后，会将返回的对象通过此jar包转化为json对象。

    com.fasterxml.jackson.core
    jackson-databind
    2.10.1

引入驱动

需要配置驱动才可使用上面的jar包，只需在springMVC的配置文件中添加下面的代码即可。

使用

举个例子，我们验证一个登录网页传来的账号密码是否正确。

在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状态码也就是成功时，才回执行回调函数。该函数的参数为服务器返回的数据对象，参数名可自定义。

	

		

			

				
用户名：
				

			
			

				
密码：
				

			
			

				

			
		
	

演示