将form表单里的数据封装成对象 json2.js的例子 jquery的serialize方法转换空格为+号的解决方法

将form表单里的数据封装成对象 json2.js的例子 jquery的serialize方法转换空格为+号的解决方法

将form表单里的数据封装成json对象即object，在后台中用usr就能接收全部参数了。可适用于strts2，easyUI的DataGrid 传参等
需要引用的js库有jquery 和  json2.js

[html] view plain copy

1. <form id="fm" >  
2.   
3.     <input type="text"   name="username"  value="zhangsan" ><BR><BR>  
4.     <input type="text"   name="age"  value="12" ><BR><BR>  
5.     <input type="text"   name="address"  value="北京  朝阳" ><BR><BR>  
6.     <input type="text"   name="job"  value="IT" ><BR><BR>  
7.      <textarea name="content">abc + 123 + 456  </textarea>  
8.     <input type="button"  value="发送"  onclick="add()" ><BR><BR>  
9.   
10.   
11. </form>  
12.   
13.  <script type="text/javascript">  
14.    
15.  function add(){  
16.      var aa= $('#fm').serialize();   
17.      alert(aa); // + 号显示多个  
18.      var bb=aa;  
19.      //关于jquery的serialize方法转换空格为+号的解决方法  
20.      bb = aa.replace(/\+/g," ");   // g表示对整个字符串中符合条件的都进行替换  
21.      bb = decodeURIComponent(bb);  //对serialize后的内容进行解码  
22.      alert(bb);  
23.  }  
24.   
25.   
26.  function conveterParamsToJson(paramsAndValues) {  
27.     var jsonObj = {};  
28.   
29.     var param = paramsAndValues.split("&");  
30.     for ( var i = 0; param != null && i < param.length; i++) {  
31.         var para = param[i].split("=");  
32.         jsonObj[para[0]] = para[1];  
33.     }  
34.   
35.     return jsonObj;  
36. }  
37.   
38. function queryParamByFormId(form) {  
39.     var formValues = $("#" + form).serialize();  
40.   
41.     //关于jquery的serialize方法转换空格为+号的解决方法  
42.     formValues = formValues.replace(/\+/g," ");   // g表示对整个字符串中符合条件的都进行替换  
43.     var temp = JSON.stringify(conveterParamsToJson(formValues));  
44.     var queryParam = JSON.parse(temp);  
45.     return queryParam;  
46. }  
47.   
48.  </script>  

easyUI的DataGrid 的例子

[html] view plain copy

1. function loadGrid() {  
2.       
3.     var queryParams=queryParamByFormId("queryform");  
4.     alert(queryParams.username);  
5.     //加载数据    
6.     $('#list_data').datagrid({  
7.         queryParams:queryParams,  
8.         loadMsg : '数据加载中请稍后……',  
9.         pagination : true,//显示分页     
10.         pageSize : 5,//分页大小     
11.         pageList : [ 5, 10, 15, 20 ],//每页的个数     
12.         fit : true,//自动补全     
13.         fitColumns : true,  
14.         //iconCls : "icon-save",//图标     
15.         //title : "用户",  
16.         width : 'auto',  
17.         height : 'auto',  
18.         collapsible : false,//是否可折叠的   
19.         fit : true,//自动大小   
20.         url : 'userAction_query.action',  
21.         remoteSort : false,  
22.         singleSelect : true,//是否单选   
23.         pagination : true,//分页控件   
24.         rownumbers : true,//行号   
25.         columns : [ [ //每个列具体内容     
26.             {field : 'ck',checkbox : true},   
27.             {field : 'USERCODE',title : '用户代码',width : 100,editor:'text'},   
28.             {field : 'USERNAME',title : '用户名称',width : 100,editor:'text'},   
29.             {field : 'VALIDSTATUS',title : '是否有效',width : 100,editor:'text'}  
30.               
31.         ] ]                       
32.     });  
33. }