为什么要请求数据而不是请求页面?
答:请求的数据不仅可以浏览器使用,客户端也可以用,服务端程序不用再次开发。
$.ajax({
url:"${APP_PATH}/emps",
//资源的地址
data:"pn="+pn,
//资源的参数
type:"GET",
//请求参数
success:function(result){ //回调函数 ,将数据传入到这个函数中
//console.log(result);
//1、解析并显示员工数据
build_emps_table(result);
//2、解析并显示分页信息
build_page_info(result);
//3、解析显示分页条数据
build_page_nav(result);
}
});
下面是controller的写法:
@RequestMapping("/emps")
@ResponseBody //必须要加这个
public Msg getEmpsWithJson(
@RequestParam(value = "pn", defaultValue = "1") Integer pn) {
// 这不是一个分页查询
// 引入PageHelper分页插件
// 在查询之前只需要调用,传入页码,以及每页的大小
PageHelper.startPage(pn, 5);
// startPage后面紧跟的这个查询就是一个分页查询
List<Employee> emps = employeeService.getAll();
// 使用pageInfo包装查询后的结果,只需要将pageInfo交给页面就行了。
// 封装了详细的分页信息,包括有我们查询出来的数据,传入连续显示的页数
PageInfo page = new PageInfo(emps, 5);
return Msg.success().add("pageInfo", page);
}
Msg 是专门为传输数据创建的类:(仔细看看)
package com.atguigu.crud.bean;
import java.util.HashMap;
import java.util.Map;
/**
* 通用的返回的类
*
* @author lfy
*
*/
public class Msg {
//状态码 100-成功 200-失败
private int code;
//提示信息
private String msg;
//用户要返回给浏览器的数据
private Map<String, Object> extend = new HashMap<String, Object>();
public static Msg success(){
Msg result = new Msg();
result.setCode(100);
result.setMsg("处理成功!");
return result;
}
public static Msg fail(){
Msg result = new Msg();
result.setCode(200);
result.setMsg("处理失败!");
return result;
}
public Msg add(String key,Object value){
this.getExtend().put(key, value);
return this;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Map<String, Object> getExtend() {
return extend;
}
public void setExtend(Map<String, Object> extend) {
this.extend = extend;
}
}
整体过程:
比如在index.jsp 页面 你触发了事件
开始执行ajax 程序,他会根据地址请求回来一个json数据
然后用回调函数来处理这些数据
将他们解析放在页面不同的位置进行显示。