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
是为了在服务器中,数据会被多次调用
有的可能调用失败,所以,封装成一个对象
有着失败或者状态的信息显示,
一是方便发开,
二也是可以多次复用
总之好处多多