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简单吧？