(转)关于Jquery 获取表单FORM所有元素进行AJAX提交

前提交代:

获取 表单FROM所有的元素可以采用var a = $('#form_id').serializeArray() 进行获取;

var form_data = $.serializeArray() 获取的数据以对象结构返回,如:

[javascript] view plain copy
  1. { [‘name’='a', 'value'='1'], [‘name’='b', 'value'='2'] }  

注意:$.serializeArray() 会过滤掉 被禁用的 元素

form_data 对象用 $.each 进行分解

[javascript] view plain copy
  1. var m = [];  
  2. $.each(x, function(i, field){  
  3.     m.push('"' + field.name + '":"' + encodeURI(field.value) + '"');  
  4. });  

下面看一下实例:

HTML

  1. <form name="test" id="F_id">  
  2.     <input name="a" value="1">  
  3.     <input name="b" value="2">  
  4. </form  

脚本

[javascript] view plain copy
  1. // 取得指定FORM里的元素  
  2. var x = $('#F_id').serializeArray(),  
  3. var m = [], idata;  
  4. // 按 AJAX数据格式归入数组,方便后面的数据打包  
  5. $.each(x, function(i, field){  
  6.     // 由于会出现"双引号字符会导致接下来的数据打包失败,故此对元素内容进行encodeURI编码  
  7.     // 后台PHP采用urldecode()函数还原数据  
  8.     m.push('"' + field.name + '":"' + encodeURI(field.value) + '"');    
  9. });  
  10. idata ='{' +  m.join(',') + '}';  
  11. // 按字符 idata 转换成 JSON 格式  
  12. idata = eval('(' +idata+ ')');  
  13.   
  14. $.getJSON(url, idata, function(data){  
  15.     /* 处理 ajax 返回结果,这个根据自己的需要编写 */  
  16. });  

 

2017-07-01 添加另一个方式,比较效率:(原来还有个JSON可以直接处理的)

[javascript] view plain copy
    1.          var params = $("#F_id").serializeArray();  
    2.          var values = {};  
    3.          for( x in params ){  
    4.             values[params[x].name] = params[x].value;  
    5.          }  
    6.          var idata = JSON.stringify(values)  
    7. ); 
       

 

原博文地址:http://blog.csdn.net/winxsm/article/details/53869232

posted @ 2018-03-13 19:06  cuculus  阅读(279)  评论(0编辑  收藏  举报