我們完成了員工的分頁查詢，但是現在這種做法只能適應瀏覽器和伺服器的互動模式，但在移動網際網路時代，客戶端不僅僅只有瀏覽器，還有安卓和IOS客戶端。我們的解決方式是AJAX+JSON方式來實現平臺無關性。

   所以我們現在需要改造我們的查詢。

   1.index,jsp頁面直接傳送AJAX請求進行員工分頁資料的查詢

   2.伺服器將查詢的資料以JSON字串的形式返回給瀏覽器

   3.瀏覽器收到JSON字串，可以使用js對JSON解析，使用js用過dom增刪改的形式改變頁面。

   4.返回JSON，實現客戶端的無關性。

   所以我們先修改後臺的程式碼，不再返回list.jsp，直接將查詢出來的pageInfo物件一JSON字串的形式返回，程式碼如下： 

/**
     * 需要jackson包
     * @param pn
     * @return
     */
    @RequestMapping("/emps")
    @ResponseBody
    public PageInfo getEmpsWithJson(@RequestParam(value="pn",defaultValue="1")Integer pn ){
        PageHelper.startPage(pn,
 
5);
        List<Employee> emps=employeeService.getAll();
        //封裝了詳細的分頁資訊，包括有我們查詢出來的資料，傳入我們連續顯示的頁數
        PageInfo page=new PageInfo(emps,5);
        return page;

    }

   記得去maven倉庫下載jackson包.

   現在我們可以先執行下專案看返回的資料是什麼樣。

  可以看到我們需要的資料都返回了，接下來我們可以新建一個通用的返回類Msg來儲存來重新儲存返回的結果，新增返回的狀態和提示資訊等。

package com.atguigu.crud.bean;

import java.util.HashMap;
import java.util.Map;

/**
 * 通用的返回類
 */
public class Msg {
    //狀態碼 100-成功 ，200-失敗
    private int code;
    //提示資訊
    private String msg;
    //使用者返回給瀏覽器的資料
    private Map<String,Object> extend=new HashMap<String, Object>();

    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;
    }
    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;
    }
}

 同時修改後臺處理請求：

 /**
     * 需要jackson包
     * @param pn
     * @return
     */
    @RequestMapping("/emps")
    @ResponseBody
    public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue="1")Integer pn ){
        PageHelper.startPage(pn,5);
        List<Employee> emps=employeeService.getAll();
        //封裝了詳細的分頁資訊，包括有我們查詢出來的資料，傳入我們連續顯示的頁數
        PageInfo page=new PageInfo(emps,5);
        return Msg.success().add("pageInfo",page);

    }

}

  結果：

   可以看到，自定義成功的狀態和msg也一起返回了。資料資訊儲存在HashMap中。