网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > jQuery

jQuery如何序列化表单的数据?

2021/9/18 21:22:35

jQuery序列化表单的数据需要用到serialize() 方法或serializeArray() 方法。 serialize() 方法 serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。 序列化的值可在生成 AJAX 请…

jQuery序列化表单的数据需要用到serialize() 方法或serializeArray() 方法。

serialize() 方法

serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中,这样在ajax提交表单数据时,就不用一一列举每一个参数,只需将data参数设置为:$("form").serialize()即可。

$(selector).serialize()语法

  输出标准的查询字符串:a=1&b=2&c=3&d=4&e=5

  注释:只会将“成功的控件”序列化为字符串。(即指没被禁用的元素)如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。

serializeArray() 方法

  serializeArray()方法通过序列化表单值来创建对象数组(名称和值)。

  您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身。

//格式:

var jsonData = $("form").serializeArray();

        注意:此方法返回的是 JSON 对象而非 JSON 字符串。

        返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值为空
]

  特别说明,元素不能被禁用(禁用的元素不会被包括在内),并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

  注意:1、不被禁用;2、包含name属性

      我们通过实际的例子来说明一下serializeArray() 方法的用法。


function queryUserInfo(actionUrl,formId,fun){
var params=new Object();  //声明数组
    $.each($("#"+formId).serializeArray(),function(index,param){  
    params[param.name] = param.value; //序列化表单
    });
    params['time']=new Date();  //1
$.ajax( {
url : basePath+actionUrl,
data : params,//没有1。能够这样写("#"+formId).serializeArray()
type : 'POST',
dataType:'json',
async: false,//表示同步,等待服务端返回数据。才会运行后面的代码
success : function(obj) {
   fun(actionUrl,formId,obj);
},
error: function() {
alert("訪问异常");
}
});
}

        通过以上内容我们知道了jQuery如何序列化表单的数据,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

    暂无相关的数据...