1. 程式人生 > >將form表單裡的資料封裝成物件 json2.js的例子 jquery的serialize方法轉換空格為+號的解決方法

將form表單裡的資料封裝成物件 json2.js的例子 jquery的serialize方法轉換空格為+號的解決方法

將form表單裡的資料封裝成json物件即object,在後臺中用usr就能接收全部引數了。可適用於strts2,easyUI的DataGrid 傳參等
需要引用的js庫有jquery 和  json2.js

  1. <formid="fm">
  2.     <inputtype="text"name="username"value="zhangsan"><BR><BR>
  3.     <inputtype="text"name="age"value="12"><BR><BR>
  4.     <inputtype="text"name
    ="address"value="北京  朝陽"><BR><BR>
  5.     <inputtype="text"name="job"value="IT"><BR><BR>
  6.      <textareaname="content">abc + 123 + 456  </textarea>
  7.     <inputtype="button"value="傳送"onclick="add()"><BR><BR>
  8. </form>
  9.  <scripttype="text/javascript"
    >
  10.  function add(){  
  11.      var aa= $('#fm').serialize();   
  12.      alert(aa); // + 號顯示多個  
  13.      var bb=aa;  
  14.      //關於jquery的serialize方法轉換空格為+號的解決方法  
  15.      bb = aa.replace(/\+/g," ");   // g表示對整個字串中符合條件的都進行替換  
  16.      bb = decodeURIComponent(bb);  //對serialize後的內容進行解碼  
  17.      alert(bb);  
  18.  }  
  19.  function conveterParamsToJson(paramsAndValues) {  
  20.     var jsonObj = {};  
  21.     var param = paramsAndValues.split("&");  
  22.     for ( var i = 0; param != null && i <param.length; i++) {  
  23.         var para = param[i].split("=");  
  24.         jsonObj[para[0]] = para[1];  
  25.     }  
  26.     return jsonObj;  
  27. }  
  28. function queryParamByFormId(form) {  
  29.     var formValues = $("#" + form).serialize();  
  30.     //關於jquery的serialize方法轉換空格為+號的解決方法  
  31.     formValues = formValues.replace(/\+/g," ");   // g表示對整個字串中符合條件的都進行替換  
  32.     var temp = JSON.stringify(conveterParamsToJson(formValues));  
  33.     var queryParam = JSON.parse(temp);  
  34.     return queryParam;  
  35. }  
  36.  </script>


easyUI的DataGrid 的例子

  1. function loadGrid() {  
  2.     var queryParams=queryParamByFormId("queryform");  
  3.     alert(queryParams.username);  
  4.     //載入資料    
  5.     $('#list_data').datagrid({  
  6.         queryParams:queryParams,  
  7.         loadMsg : '資料載入中請稍後……',  
  8.         pagination : true,//顯示分頁     
  9.         pageSize : 5,//分頁大小     
  10.         pageList : [ 5, 10, 15, 20 ],//每頁的個數     
  11.         fit : true,//自動補全     
  12.         fitColumns : true,  
  13.         //iconCls : "icon-save",//圖示     
  14.         //title : "使用者",  
  15.         width : 'auto',  
  16.         height : 'auto',  
  17.         collapsible : false,//是否可摺疊的   
  18.         fit : true,//自動大小   
  19.         url : 'userAction_query.action',  
  20.         remoteSort : false,  
  21.         singleSelect : true,//是否單選   
  22.         pagination : true,//分頁控制元件   
  23.         rownumbers : true,//行號   
  24.         columns : [ [ //每個列具體內容     
  25.             {field : 'ck',checkbox : true},   
  26.             {field : 'USERCODE',title : '使用者程式碼',width : 100,editor:'text'},   
  27.             {field : 'USERNAME',title : '使用者名稱稱',width : 100,editor:'text'},   
  28.             {field : 'VALIDSTATUS',title : '是否有效',width : 100,editor:'text'}  
  29.         ] ]                       
  30.     });  
  31. }