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

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

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

目录
相关文章
|
5月前
|
JSON 前端开发 Java
表单数据序列化,后台如何接收(java)
表单数据序列化,后台如何接收(java)
|
15天前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
13 0
|
24天前
|
JavaScript 前端开发
jQuery 和 Zepto 的区别? 各自的使用场景?
jQuery 和 Zepto 的区别? 各自的使用场景?
10 1
|
1月前
|
安全 JavaScript 数据安全/隐私保护
jQuery会员中心安全修改表单特效
jQuery实现的会员中心安全修改表单特效代码是一款实现了可以修改登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置效果的代码
14 4
jQuery会员中心安全修改表单特效
|
1月前
|
存储 JSON 安全
序列化模块pickle和json有什么区别
序列化模块pickle和json有什么区别
18 0
|
6月前
|
JavaScript 前端开发
前端基础 -JQuery之 表单选择器
前端基础 -JQuery之 表单选择器
28 0
|
2月前
|
JavaScript 前端开发 数据格式
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
46 0
|
3月前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
40 0
|
3月前
|
JavaScript 前端开发
|
4月前
|
JavaScript 前端开发 开发者
vue和jQuery有什么区别
vue和jQuery有什么区别
80 0

相关课程

更多