jquery获取表单数据

一、serialize()方法<br style="color: #111111; font-size: 13px; line-height: 21.06px; white-space: pre-wrap;">1、格式<br style="color: #111111; font-size: 13px; line-height: 21.06px; white-space: pre-wrap;">var data = $("form").serialize();<br style="color: #111111; font-size: 13px; line-height: 21.06px; white-space: pre-wrap;">2、功能<br style="color: #111111; font-size: 13px; line-height: 21.06px; white-space: pre-wrap;">将表单内容序列化成一个字符串。<br style="color: #111111; font-size: 13px; line-height: 21.06px; white-space: pre-wrap;">3、返回结果<br style="color: #111111; font-size: 13px; line-height: 21.06px; white-space: pre-wrap;">username=forrest&passwd=1234&gender=0&interest=swimming&interest=running&interest=readBook
如果存在中文,需要转码
jquery form表单.serialize()序列化后中文乱码问题原因及解决
原因:.serialize()自动调用了encodeURIComponent方法将数据编码了 
解决方法:调用decodeURIComponent(XXX,true);将数据解码 
例如: 
var params = jQuery("#formId").serialize(); // http request parameters. 
params = decodeURIComponent(params,true);
在进行编码
params = encodeURI(encodeURI(params));
 后台
String paramsTrans = new String(params.getBytes("ISO-8859-1"),"UTF-8");
params = java.net.URLDecoder.decode(paramsTrans , "UTF-8");
问题解决。
----------------------------------------------------------------------------------------------------------------------------------
注意:页面端发出的数据作两次encodeURI,这个做的好处在于,不管浏览器用户在页面来设置编码,服务器所采用的编码来做一次URLencode转换成UTF-8.
encodeURL函数主要是来对URI来做转码,它默认是采用的UTF-8的编码.
 具体说明2次encodeURI:
其中具体的原理分析如下,假设页面端输入的中文是一个“中”,按照下面步骤进行解码
1.第一次encodeURI,按照utf-8方式获取字节数组变成[-28,-72-83],对字节码数组进行遍历,把每个字节转化
成对应的16进制数,这样就变成了[E4,B8,AD],最后变成[%E4,%B8,%AD]
2.第二次encodeURI,把数组最后变成[%25E4,%25B8,%25AD]然后就把处理后的数据[%25E4,%25B8,%25AD]
发往服务器端,当应用服务器调用getParameter方法,getParameter方法会去向应用服务器请求参数
应用服务器最初获得的就是发送来的[%25E4,%25B8,%25AD],应用服务器会对这个数据进行URLdecode操作,
URldecode操作和encodeURL操作是相反的操作,处理结果就是[%E4,%B8,%AD],并把这个值返回
给getParameter方法
然后再在服务器端中调用相应的URL转码方法或者是函数  就可以把数据还原成最初页面发送过来的中文“中”了。
 
二、serializeArray()方法<br style="color: #111111; font-size: 13px; line-height: 21.06px; white-space: pre-wrap;">1、格式<br style="color: #111111; font-size: 13px; line-height: 21.06px; white-space: pre-wrap;">var jsonData = $("form").serializeArray();<br style="color: #111111; font-size: 13px; line-height: 21.06px; white-space: pre-wrap;"><br style="color: #111111; font-size: 13px; line-height: 21.06px; white-space: pre-wrap;">2、功能<br style="color: #111111; font-size: 13px; line-height: 21.06px; white-space: pre-wrap;">将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。<br style="color: #111111; font-size: 13px; line-height: 21.06px; white-space: pre-wrap;"> <br style="color: #111111; font-size: 13px; line-height: 21.06px; white-space: pre-wrap;">3、返回结果:<br style="color: #111111; font-size: 13px; line-height: 21.06px; white-space: pre-wrap;">[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name。
<br>
<br>
jquery扩展函数:
<br>
<br>
$.fn.serializeObject = function(para)    <br> {    <br> var serializeObj={}; // 目标对象 <br> var tempObj={};//临时对象<br>     var array=this.serializeArray(); // 转换数组格式<br>     if(para!=null&&para!=undefined){<br>     $.each(para,function(name,value) {<br>     array.push({"name":name,"value":value});<br>     });<br>     }<br>     console.log(para);<br>     console.log(array);<br>     $(array).each(function(){ // 遍历数组的每个元素 {name : xx , value : xxx} <br>         if(serializeObj[this.name]){ // 判断对象中是否已经存在 name,如果存在name <br>               if($.isArray(serializeObj[this.name])){ <br>                  serializeObj[this.name].push(this.value); // 追加一个值 hobby : ['音乐','体育'] <br>               }else{ <br>                       // 将元素变为 数组 ,hobby : ['音乐','体育'] <br>                  serializeObj[this.name]=[serializeObj[this.name],this.value]; <br>               } <br>         }else{ <br>             serializeObj[this.name]=this.value; // 如果元素name不存在,添加一个属性 name:value <br>         } <br>     });     <br>    return serializeObj;    <br> };<br>
<br>
<br>
附:
字符串转对象(strJSON代表json字符串)
  var obj = eval(strJSON);
  var obj = strJSON.parseJSON();
  var obj = JSON.parse(strJSON);
json对象转字符串(obj代表json对象)
  var str = obj.toJSONString();
  var str = JSON.stringify(obj)
运用时候需要除了eval()以外需要json.js包(切记哦)

相关推荐