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&¶!=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包(切记哦)
相关推荐
yaodilu 2020-05-10
SXIAOYI 2020-09-16
有心就有方向 2012-09-03
zfyaixue 2013-06-14
pigsmall 2020-11-19
Ladyseven 2020-07-25
whileinsist 2020-06-24
gufudhn 2020-06-12
冰蝶 2020-06-05
LinuxAndroidAI 2020-06-04
supperme 2020-05-28
e度空间 2020-04-27
云端漂移 2020-04-09
peterwzc 2020-03-17
ebuild 2013-05-14
donghedonghe 2013-05-31
tdeclipse 2011-02-28
linuxprobe0 2013-04-15