我們完成了員工的分頁查詢，但是現在這種做法只能適應瀏覽器和服務器的交互模式，但在移動互聯網時代，客戶端不僅僅只有瀏覽器，還有安卓和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中。

SSM_CRUD新手練習（10）返回分頁的JSON數據