jQuery 第八课 —— 数据交互的升级

前言:

之前我们所讲到的,单纯只是数据的传递

今天我们要讲传递的数据再升级

将数据封装成一个有错误信息提示和方便调用者使用的对象

可以将它称为 服务端API

废话不多数,直接进入代码解释。

步骤:

1.首先我们先建立一个API的实体类

可以包含以下信息

  status 状态 int 

  message 状态信息 String

  errorCode 错误状态 int

  errorInfo 错误信息 String

  Data 数据 Object

2.然后我们创建一个我们需要传递数据对应的的实体类

  

3.下一步我们编写控制器

        //编码设置
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html; charset=UTF-8");
        
        //实例化三个对象
        Hero h01 = new Hero();
        h01.setName("刘备");
        h01.setHeadPic("img/a01.jpg");
        
        Hero h02 = new Hero();
        h02.setName("关羽");
        h02.setHeadPic("img/a02.jpg");
        
        Hero h03 = new Hero();
        h03.setName("张飞");
        h03.setHeadPic("img/a03.jpg");
        
        //创建集合,存入对象
        List<Hero> lh = new ArrayList<Hero>();
        lh.add(h01);
        lh.add(h02);
        lh.add(h03);
        
        //实例化一个API类
        ApplicationInterface api = new ApplicationInterface();
        api.setStatus(1);// 1 代表正确
        api.setMessage("数据正确,请放心调用"); //记录状态信息
        api.setErrorCode(-1); // -1 表示失败
        api.setErrorInfo("数据发生错误"); //记录错误信息
        api.setData(lh); //存入数据
        
        //GSON解析
        Gson gson = new GsonBuilder().create();
        String json = gson.toJson(api);
        
        //输出到前端
        PrintWriter out = response.getWriter();
        out.print(json);
        out.flush();
        out.close();

4.可以输出到控制台查看结果

  解析结果:

{
    "status": 1,
    "message": "数据正确,请放心调用",
    "errorCode": -1,
    "errorInfo": "数据发生错误",
    "data": [
        {
            "name": "刘备",
            "headPic": "img/a01.jpg"
        },
        {
            "name": "关羽",
            "headPic": "img/a02.jpg"
        },
        {
            "name": "张飞",
            "headPic": "img/a03.jpg"
        }
    ]
}

5.编写前端代码

6.编写js代码

7.查看结果

8.预加载的效果

  先让服务器睡三秒

  添加前端代码

9.查看效果

总结:

之所以就会添加一个API

是为了在服务器中,数据会被多次调用

有的可能调用失败,所以,封装成一个对象

有着失败或者状态的信息显示,

一是方便发开,

二也是可以多次复用

总之好处多多

原文地址:https://www.cnblogs.com/mxnd/p/7250562.html