jquery序列化表单 - serialize()serializeArray()param()区别

xiaoxiao2024-04-21 13

serialize()

在jQuery中，当我们使用ajax时，常常需要拼装input数据以键值对（Key/Value）的形式发送到服务器，用JQuery的serialize方法可以轻松的完成这个工作，使用这个方法可以将表单序列化为键值对（key1=value1&key2=value2…）后提交。下面介绍JQuery中serialize()的用法

定义

serialize()方法通过序列化表单值，创建URL编码文本字符串，可以选择一个或多个表单元素（比如 input 及/或文本框），或直接选择form本身，将其序列化后用于ajax请求，如：username=xxx&password=yyy

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

格式

var data = $('form').serialize();

功能

将表单内容序列化成一个字符串

返回结果

username=forrest&passwd=1234&gender=0&interest=swimming&interest=running&interest=readBook

优点

1.在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为$("form").serialize()

2.用字符串方式时，需要注意对字符编码（中文问题），如果不希望编码带来麻烦，可以使用serialize()方法，它会自动编码

实例

<form action=""> First name: <input type="text" name="FirstName" value="Bill" /><br /> Last name: <input type="text" name="LastName" value="Gates" /><br /> </form> <script> $(document).ready(function(){ console.log($("form").serialize()); // FirstName=Bill&LastName=Gates }); </script>

这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()

$.ajax({ type: 'post', url: 'your url', data: $("form").serialize(), success: function(data) { // your code }, error: function(error){alert(error); });

使用$.post()、$.get()和$.getJSON()也是一样的

$.post('your url', $("form").serialize(), function(data) { // your code } }); $.get('your url', $("form").serialize(), function(data) { // your code } }); $.getJSON('your url', $("form").serialize(), function(data) { // your code } });

serializeArray()方法

JQuery中serializeArray方法是序列化表单元素(类似'.serialize()'方法)返回JSON数据结构数据

serializeArray()序列化表单元素为JSON数据

格式

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

功能

将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串

返回结果：

[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name

实例

var fields = $("select, :radio").serializeArray(); jQuery.each( fields, function(i, field){ $("#results").append(field.name + "=" +field.value + "; "); });//username=forrest; passwd=1234; gender=0; interest=swimming; interest=running; interest=readBook;

在使用ajax提交表单数据时,以上两种方法都可以将data参数设置为$(form).serialize()或$(form).serializeArray()

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="js/jquery-3.1.1.min.js"></script> <script> function t(){ var str1 = $("form").serialize(); var str2 = $("form").serializeArray(); alert("serialize="+str1+" serializeArray="+str2); } </script> </head> <body> <form> <input type="text" name="username" /> <input type="text" name="age" > <input type="password" name="password" /> <input type="button" onclick="t();"> </form> </body> </html>

param()方法

$.param()方法是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化

比如将一个普通的对象序列化：

var obj = {a:1,b:2,c:3};

var k = $.param(obj);

alert(k); //输出a=1&b=2&c=3