个人登录
数狐在线-做最好的在线学习社区java c# liferay jsp
json的应用例子演示 - 从初级到高级!
北鼎K105养生壶 进口加厚玻璃水果茶花草茶煎药壶电水壶养身壶
    2017-12-11 20:32:45    作者:  jQueryEx      进入评论页
    
    


上面的界面一共展示3列,数据都来自数据库的表信息,这个功能的实现,计划使用json的技术,在JAVA后台,按照查询
条件遍历100条数据,然后分别展示,
 
                     一,在后端的初始化

现在我们开始思考如何进行后台的json数据结构的初始化,初始化完成后,即可进行转换成json字符串的格式返回给前端
让前端进行展示。




上面的json数据类似:


       
在这里我们需要生成一个json的对象数组,比如按照页面的布局,有左右中三部分,需要分别生成这样的三个 json的对象。

在后台的部分代码摘录:

import org.json.JSONArray;
import org.json.JSONObject;

这是需要用到的相关类

JSONArray array = new JSONArray();

JSONObject obj = new JSONObject();
我们在声明了json的对象与json的对象数组以后,就开始初始化json对象,然后把json对象压到数组中。


obj.put("arc_id", res.getString("arc_id"));
obj.put("arc_title", res.getString("arc_title"));
obj.put("arc_author", res.getString("arc_author"));
obj.put("arc_time", res.getString("arc_time"));
obj.put("shorttxt", res.getString("shorttxt"));
obj.put("arc_body", res.getString("arc_body"));
               
array.put(obj);
把对象压入到数组中。



上面的代码,可以完成把数据压入json的对象,但是如何从前端读出来是个比较大的问题!至少还没有相关的代码
可以演示这个过程。

public void insertJsonArrayToJsonObject(){
    JSONArray jsonArray = new JSONArray();
    JSONObject jsonObject = new JSONObject();
    jsonObject.put("userName","okBob");
    ArrayList list =new ArrayList();
    list.add("shuhu corp");
    list.add("how to send Message to ...");  
    jsonObject.put("arc",list);  
    System.out.println(jsonObject.toString());    
  }

执行上面的代码,我们可以看到输出的结果如下:

{"arc":["shuhu corp","how to send Message to ..."],"userName":"okBob"}


使用list的方式非常不规范,不利于后面的数据绑定和演示,正式的写法应该是:

 JSONArray resV = new JSONArray(); 

 JSONObject item = new JSONObject();

   temp=lformA.res.getString("arc_title");

    item.put("arcTitle",temp);

     

      temp=lformA.res.getString("arc_id");

      item.put("arcID",temp);

   

      logUtil.addLogLine(temp+" ");

      resV.put(item);



上面的做法比较规范,返回JSONArray对象,而不是字符串,因为返回字符串的话,双引号无法正确的在json的数据格式里
正确的显示,会显示反斜杠两个双引号,所以,不要拼凑json的数据结果用字符串从零开始,要使用标准的方法来生成
json的对象与数组,然后进行规范的处理。

可以看到这里的arc确实已经成为了数组的格式,以方便后续的检索使用!
到这里为止,我们基本上可以实现从数据库里调取足够的数据并且分配到json的对象中。





                                 二,在前端的解析



                                 三,在前端的展示

关于在前端进行展示,可以使用JS,模板引擎包括:
    mustache   - 这个模板引擎比较简单好用,推荐使用!
    underscore.js -
    handlebars  -
这里还特别说明的是,对于模板和jQuery的结合来说的引擎包括:
   NANO  - 专门针对jquery,json等完美结合的模板引擎

   The “template” binding - 适合DOM树的嵌套复杂的视图结构层次

   JsViews - 下一代的 jQuery Templates 基于JsRender templates

  JsRender - 下一代的 jQuery 完全基于字符串的展示,对DOM或jQuery独立,非依赖。

  google-jstemplate - 简单灵活的基于浏览器端的模板处理过程,尤其是基于Ajax的web应用尤其合适。

  The jQuery Templates Plugin - 一直没有发布正式版,目前已经停止维护了

  jQote2 ? JavaScript Templating Revamped

  kite - javascript的模板语言
 
  Tempo 1.7 -Tempo是一个小型的json展示引擎,可以让你在纯HTML中处理数据。   

  
    






官方微信服务号
进入评论页
合作企业