JQUERY+JSON+Struts 1.3例子

原文地址：http://bryanlin.x10hosting.com/2010/07/jqueryjsonstruts-1-3/

 

      最近在做个项目，要求前端用Jquery和jsp，后端用struts+spring+ibatis，由于以前一般用XML做前后台的数据传输，最近学习Jquery时发现JSON比XML更方便处理，于是决定用Jquery通过Ajax与后台通讯，数据格式采用Json来做。

      方案确定了，开始找资料，谁知大多数例子都是在客户端将form序列化，传输到服务端，然后服务端通过request.getParameter()一个字段一个字段的拿出来处理，最后返回Json格式的数据给客户端，客户端再处理。

      这样获取参数也太麻烦了，还不如直接用struts form呢，但是那样要建很多formbean，不爽。有没有更好的办法呢？比如一次request.getParameter()就把所有Json数据获取到，获取到后，接下来就好办了，通过JSONObject.fromObject()方法，很容易就可以将Json数据转换成JSONObject对象了，再通过JSONObject.toBean( )转换成DTO，多方便啊。

      找来找去，还真找到办法了，就是在客户端动手脚：

 

1. 不要用序列化，而是手工将所有要传到服务端的数据拼成Json对象，格式为：{key1:value1,key2:value2 ……}，方法如下：

/** * 根据指定的元素名称等，遍历页面上所有该元素，拼成json对象并返回 * 参数格式：":elementName",例如":input"或":input[type='text']" */ function getJsonObj(element) { var map = {}; var $inputs = $(element); if ( $inputs ) { $inputs.each(function (i) { map[$(this).attr("name")] = $(this).attr("value"); }); } return map; }

 

2. 通过JSON.stringify()，将拼成的Json对象字符串化，打印出来，就是上面那样子，只不过对象alert出来显示object，字符串alert出来是上面那格式。

 

3. 将第2步生成的字符串作为value，再拼一个Json对象，key自己起名，比如json。

/** * 将JSON对象转变成JSON格式的字符串，作为参数值组成新的json对象返回 * 服务端只需获取一次参数，即可获得整个json对象包含的页面数据 * 如果jsonObj为null，那么返回{json:null} */ function getJsonParams(jsonObj) { var strInputs = JSON.stringify(jsonObj); //将JSON对象转变成JSON格式的字符串 var params = {json:strInputs}; return params; }

 

4. 把第三步生成的Json对象作为参数，通过Jquery的$.post()之类的方法发送到服务端。

$.post(“<%=path%>/cust/custManage.do?method=addCust”, getJsonParams(getJsonObj(“input:text”)), //此处即为传给服务端的Json参数 function(data, textStatus) {//回调函数，请求成功时执行 HINT(data['msg']); //msg为服务端返回的Json对象中的值 if(data['result'] == “success”) { //result为服务端返回 $(“:input[type='text']“).attr(“value”,”");//清空输入框 } }, ”json”)//指定返回的数据格式为Json

 

然后在服务端，如下处理：

//获取第2步产生的Json格式字符串 String inputs = request.getParameter(“json”); //将json参数转换为JSONObject JSONObject jsonObject = JSONObject.fromObject(inputs); //把json对象转换为java bean XXDTO xxDTO = (XXDTO) JSONObject.toBean( jsonObject, XXDTO.class );

 

其中XXDTO是你的DTO，是不是简单多了？

服务端处理完毕，组装Json格式数据，应答客户端，比如：

String msg = "{/"result/":/"success/",/"msg/":/"客户资料保存成功！/"}";//Json格式的应答 response.setContentType("text/json; charset=UTF-8″); //指定返回格式为Json pw = response.getWriter(); pw.print(msg); pw.flush();

 

最后，如果Ajax请求成功，$.post中定义的回调函数将执行，该函数先是显示服务端返回信息，然后如果返回成功信息的话，则清空页面输入框。

怎么样？比直接用Json序列化和Struts简单吧？