1.serialize()
serialize()方法通过序列化表单值,创建URL编码文本字符串。他的操作对象是代表表单元素集合的jquery对象,不过也可以针对个别的表单元素进行序列化
表单元素得几种类型:<input> <textarea> <select>
表单序列化:
表单个别元素序列化
serialize()序列化汉字会是乱码
原因:serialize()自动调用了encodeURIComponent()方法,将数据编码了
解决办法:调用decodeURIComponent()方法将数据解码
例如:
<script type="text/javascript">
$(document).ready(function(){
$("#btnSubmit").click(function(){
var serializeVal=$("#formDataSubmit").serialize();
// 将序列化表单解码
serializeVal=decodeURIComponent(serializeVal,true);
console.log("表单元素序列化输出的值------------");
console.log(serializeVal);
});
});
</script>
输出结果截图:
汉字不再是乱码了
注意:使用序列化时,必须给要序列化的字段加上name属性
2.serializeArray()
序列化后创建的是对象数组(名称和值),返回JSON数据结构
注意:此方法返回的是 JSON 对象而非 JSON 字符串。
返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:
[
{name: 'firstname', value: 'Hello'},
{name: 'lastname', value: 'World'},
{name: 'alias'}, // 值为空
]
注意:禁用的元素不会被序列化,文件选择的元素也不会被序列化
序列化的代码:
<script type="text/javascript">
$(document).ready(function(){
$("#btnSubmit").click(function(){
//表单序列化数组
var serializeVal=$("#formDataSubmit").serializeArray();
console.log("表单元素序列化数组输出的值------------");
console.log(serializeVal);
});
});
</script>
序列化输出的结果:
由上面代码和效果图可以看到不需要编码和解码
遍历输出属性和值可以用以下方法
console.log("遍历数组输出的值------------");
$.each(serializeVal,function(i,file){
console.log("name:"+file.name+",value:"+file.value);
})
效果图如下:
3.serializeObj()
序列化后创建的是对象,jquery本身是没有这个方法的,我自己封装的一个
代码如下:
$.prototype.serializeObj=function(){
var arr=this.serializeArray();
var obj={};
$.each(arr,function(index,file){
if(!(file.name in obj)){
obj[file.name]=file.value;
}
});
return obj;
}
效果图如下:
注意:当序列化表单中出现多个相同的name时,serializeObj只会取到第一个name
单选按钮时:相同的name,获取的是checked的那个按钮值
多选按钮时:相同的name,获取的是第一个的checked的那个按钮值
代码如下
<form id="formDataSubmit" name="formDataSubmit">
<div>
<label>姓名</label>
<input type="text" name="userName" class="userName">
</div>
<div>
<label>年龄</label>
<input type="text" name="age">
</div>
<div>
<label>职业</label>
<input type="text" name="occupation">
</div>
<div>
<label>性别</label>
<input type="radio" name="sex" id="sex" value="男">
<label>男</label>
<input type="radio" name="sex" id="sex" value="女">
<label>女</label>
</div>
<div>
<label>爱好</label>
<input type="checkbox" name="checkbox" value="游泳">
<label>游泳</label>
<input type="checkbox" name="checkbox" value="拳击">
<label>拳击</label>
<input type="checkbox" name="checkbox" value="打篮球">
<label>打篮球</label>
<input type="checkbox" name="checkbox" value="踢足球">
<label>踢足球</label>
</div>
</form>
效果图:
以一下代码为例来总结下三种形式的区别
<form id="formDataSubmit" name="formDataSubmit">
<div>
<label>姓名</label>
<input type="text" name="userName" class="userName">
</div>
<div>
<label>年龄</label>
<input type="text" name="age">
</div>
<div>
<label>职业</label>
<input type="text" name="occupation">
</div>
<div>
<label>性别</label>
<input type="radio" name="sex" id="sex" value="男">
<label>男</label>
<input type="radio" name="sex" id="sex" value="女">
<label>女</label>
</div>
<div>
<label>爱好</label>
<input type="checkbox" name="checkbox" value="游泳">
<label>游泳</label>
<input type="checkbox" name="checkbox" value="拳击">
<label>拳击</label>
<input type="checkbox" name="checkbox" value="打篮球">
<label>打篮球</label>
<input type="checkbox" name="checkbox" value="踢足球">
<label>踢足球</label>
</div>
</form>
区别:
4.serialize-object.js
是一款表单序列化的插件,本人也用于开发中过,兼容性也还不错,附上链接地址
http://www.sucainiu.com/serialize-object.html