前端开发 HTML5 CSS3 HTML CSS JavaScript jQuery Bootstrap

基于jQuery.form.js将表单序列化为json对象

jQuery HTML我帮您 1年前  0次浏览
jQuery.form.js表单插件,可以让您轻松地在HTML表单中使用AJAX。主要的方法,ajaxForm和ajaxSubmit从表单元素,收集信息,以决定如何管理提交过程。更多方法:formToArray,formSerialize,fieldSerialize,fieldValue,clearForm,clearFields,resetForm等

1.serialize()方法
  格式:var data = $("#formID").serialize();
  功能:将表单内容序列化成一个字符串。
  这样在ajax提交表单数据时,就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize()即可。

2.serializeArray()方法
  格式:var jsonData = $("#formID").serializeArray();
  功能:将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。
  比如,<{"name":"html580"},{password:'html580'}> 获取数据为 jsonData<0>.name

3.$.param()方法,可以把json格式数据序列化成字符串形式
var obj={a:1,b:2}
var s=$.param(obj);
会形成a=1&b=2的形式

上面的几种方法都不能满足我们的要求,于是进行了扩展,扩展代码如下:
$.fn.serializeJson = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o) {
if (!o.push) {
o = < o >;
}
o.push(this.value || '');
} else {
o = this.value || '';
}
});
return o;
}
格式: var jsonData = $("#formID").serializeJson();
功能:将页面表单序列化成一个JSON结构的对象
比如:{name:'html580',password:'html580'} 获取数据为 jsonData.name


发表评论