前言
ajax大大地方便了前台页面的显示,提升了用户体验,提高了资源的利用率。而jquery支持的ajax方法又为ajax的实现提供了封装,免去了繁琐的浏览器兼容判断与response返回数据状态判断。
jquery的ajax支持String、XML和JSON机种格式,而随着现在类库的不断完善,现在可以很方便的直接将对象直接转换成JSON的数据格式,返回给前台。而前台JS也可以将JSON数据很方便地再转换成对象。
相对于XML,JSON这种数据格式可能直接看上去没有XML那么清晰,但是其更利于对其的解析,直接eval即可获取其对象,利于编程。
一、实例
实例才是王道,需求如下:
输入整机条码信息,后台查询相关数据(工单号码、机种、工单数量)并将其自动显示到页面
采用jquery触发整机条码的change事件,触发时走如下ajax方法
$.ajax({ //采用post方式传递数据 type: "POST", //struts的action请求 url: "repairinfo!queryorder", //传递到后台的数据 data: "machinecode="+$("#machinecode").val(), //采用json的方式返回数据 dataType:"json", //后台返回数据后的方法,返回数据为result success: function(result){ //通过eval方法后台组织的json数据可以直接转化为对象 var ary = eval(result); //获取数据时直接在引号内填写字段名称即可 $("#machinecode").val(ary['machinecode']); $("#orderid").val(ary['orderid']); $("#machine").val(ary['machine']); $("#num").val(ary['num']); if(ary['machinecode'] == null || ary['machinecode'] == ""){ $("#isflowid").html("此整机条码不存在!"); }else{ $("#isflowid").empty(); } } });
后台获取数据转换为json形式返回前台
public void queryorder() throws Exception{ /** 此处省略如何获取实体repairinforshow */ //将实体转化为json形式 JSONObject json = JSONObject.fromObject(repairinforshow); System.out.println("开始组织repairin"+json.toString()); //运用response返回数据 HttpServletResponse response2 = ServletActionContext.getResponse(); response2.setCharacterEncoding("UTF-8"); response2.setContentType("text/html;charset=utf-8"); response2.setHeader("Cache-Control", "no-cache"); response2.getWriter().write(json.toString()); }
下面是后台控制台打印出来的json.toString()
开始组织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来转化
JSONArray json = JSONArray.fromObject(testsets);
转化为json的ArrayList
开始组织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中添加如下代码即可
<dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> </dependency>