开发者社区> webmirror> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
论c++中的数组,vector和array的区别及用法
论c++中的数组,vector和array的区别及用法
27 0
Serializable详解(1):代码验证Java序列化与反序列化
Serializable详解之代码验证Java序列化与反序列化
1034 0
jquery中attr和prop的区别
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。 关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单: 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
582 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
10063 0
解决:class invalid for deserialization序列化的问题(真实有效)
数据库连接失败 在数据库连接失败,经常会有蛮多一系列的问题导致的原因,这个时候一定要多去尝试一下各种方法,并且做好自己的梳理! 一、例如我在SpringBoot项目中使用了阿里的数据库连接池Driud。
3518 0
java中getAttribute和getParameter的区别
java中getAttribute和getParameter的区别 getAttribute表示从request范围取得设置的属性,必须要先setAttribute设置属性,才能通过getAttribute来取得,设置与取得的为Object对象类型 getParameter表示接收参数,参数为页...
781 0
Java容器类List、ArrayList、Vector及map、HashTable、HashMap的区别与用法
Java容器类List、ArrayList、Vector及map、HashTable、HashMap的区别与用法 ArrayList 和Vector是采用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元...
862 0
+关注
webmirror
Good good study, day day up
122
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载