查询-AJAX-JSON

1、index.jsp页面直接发送ajax请求进行员工分页数据的查询
2、服务器将查出的数据，以json字符串的形式返回给浏览器
3、浏览器收到js字符串。可以使用js对json进行解析，使用js通过 dom增删改改变页面。
4、返回json。实现客户端的无关性。

pom.xml:

<!-- 返回json字符串的支持 --><!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --><dependency>    <groupId>com.fasterxml.jackson.core</groupId>    <artifactId>jackson-databind</artifactId>    <version>2.8.8</version></dependency>

Msg.java:

/** * 通用的返回的类 *  * @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;    }}

EmployeeController.java:

/** * 导入jackson包。 * @param pn * @return */@RequestMapping("/emps")@ResponseBodypublic 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);}

index.jsp:

使用JS对JSON进行解析，使用JS通过DOM增删改改变页面：

https://gist.github.com/zmdlbr/ea945dc940924b81557606cc8306e7e1