前言

    ajax大大地方便了前台页面的显示，提升了用户体验，提高了资源的利用率。而jquery支持的ajax方法又为ajax的实现提供了封装，免去了繁琐的浏览器兼容判断与response返回数据状态判断。

    jquery的ajax支持String、XML和JSON机种格式，而随着现在类库的不断完善，现在可以很方便的直接将对象直接转换成JSON的数据格式，返回给前台。而前台JS也可以将JSON数据很方便地再转换成对象。

    相对于XML，JSON这种数据格式可能直接看上去没有XML那么清晰，但是其更利于对其的解析，直接eval即可获取其对象，利于编程。

一、实例 

实例才是王道，需求如下:

输入整机条码信息，后台查询相关数据（工单号码、机种、工单数量）并将其自动显示到页面

jquery下的json格式ajax实现_ajax

采用jquery触发整机条码的change事件，触发时走如下ajax方法

  1. $.ajax({  
  2.     //采用post方式传递数据
  3.     type: "POST",  
  4.     //struts的action请求
  5.     url: "repairinfo!queryorder",
  6.     //传递到后台的数据  
  7.     data:   "machinecode="+$("#machinecode").val(),  
  8.     //采用json的方式返回数据
  9.     dataType:"json",  
  10.     //后台返回数据后的方法，返回数据为result
  11.     success: function(result){           
  12. //通过eval方法后台组织的json数据可以直接转化为对象
  13.         var ary = eval(result);  
  14.           
  15.         //获取数据时直接在引号内填写字段名称即可
  16.         $("#machinecode").val(ary['machinecode']);  
  17.         $("#orderid").val(ary['orderid']);  
  18.         $("#machine").val(ary['machine']);  
  19.         $("#num").val(ary['num']);  
  20.           
  21.         if(ary['machinecode'] == null || ary['machinecode'] == ""){  
  22.             $("#isflowid").html("此整机条码不存在！");  
  23.         }else{  
  24.             $("#isflowid").empty();  
  25.         }  
  26.     }  
  27. }); 

后台获取数据转换为json形式返回前台

  1. public void queryorder() throws Exception{  
  2.     /** 此处省略如何获取实体repairinforshow */     
  3.  
  4.     //将实体转化为json形式 
  5.     JSONObject json = JSONObject.fromObject(repairinforshow);  
  6.        System.out.println("开始组织repairin"+json.toString());  
  7.              
  8.     //运用response返回数据
  9.     HttpServletResponse response2 = ServletActionContext.getResponse();  
  10.     response2.setCharacterEncoding("UTF-8");  
  11.     response2.setContentType("text/html;charset=utf-8");  
  12.     response2.setHeader("Cache-Control", "no-cache");  
  13.     response2.getWriter().write(json.toString());  
  14. } 

下面是后台控制台打印出来的json.toString()

  1. 开始组织repairin{"count":"","description":"","errorcode":"","flag":"","id":0,"isreplacekey":"","machine":"I5","machinecode":"L36832-1C37066630","mainboardcode":"","mainboardreason":"","mainboardrepair":"","mainboardrepairman":"","mainboardresult":"","mainboardresultremark":"","num":"123","orderid":"12","reason":"","repair":"","repairman":"","repairtime":null,"result":"","resultremark":"","station":"","testman":"","uploadtime":null}  

 

二、几个注意点

1、在后台代码中转化为JSON的方法

如果是要传递collection，需要采用JSONArray来转化

  1. JSONArray json = JSONArray.fromObject(testsets); 

转化为json的ArrayList

  1. 开始组织testsets[{"id":1,"machineid":"6","remark":"前测","testtype":"前测"},{"id":2,"machineid":"6","remark":"老化","testtype":"老化"},{"id":3,"machineid":"6","remark":"后测","testtype":"后测"}]  

2、后台转换JSON数据用到的jar包

xom-1.1.jar                             json-lib-2.4.jar
ezmorph-1.0.6.jar                   commons-logging-1.1.1.jar
commons-lang-2.5.jar             commons-collections-3.2.1.jar
commons-beanutils-1.8.0.jar


如果是采用maven管理，只要早pom.xml中添加如下代码即可

  1. <dependency> 
  2.     <groupId>net.sf.json-lib</groupId> 
  3.     <artifactId>json-lib</artifactId> 
  4. </dependency>