jquery序列化表单 - serialize()/serializeArray()/param()区别-阿里云开发者社区

开发者社区> 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

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

相关文章
juquery源码研究:addEventListener与attachEvent区别
先测试下: debugger if(!window.attachEvent &amp;&amp; window.addEventListener) { Window.prototype.attachEvent = HTMLDocument.prototype.attachEvent= HTMLElement.prototype.attachEvent=fu
1583 0
Java容器类List、ArrayList、Vector及map、HashTable、HashMap的区别与用法
Java容器类List、ArrayList、Vector及map、HashTable、HashMap的区别与用法 ArrayList 和Vector是采用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元...
789 0
Request、Request.Params、Request.QueryString、Request.form的区别
Request:Request["id"]是一个复合功能读取函数。它从几个集合取数据是有顺序的,从前到后的顺序依次是:QueryString > Form > Cookies > ClientCertificate > ServerVariables,也即是一般get比post优先级高些。
1721 0
jquery中attr和prop的区别
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。 关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单: 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
550 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6915 0
Serializable详解(1):代码验证Java序列化与反序列化
Serializable详解之代码验证Java序列化与反序列化
921 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7758 0
IEnumerable和IQueryable在使用时的区别
最近在调研数据库查询时因使用IEnumerable进行Linq to entity的操作,造成数据库访问缓慢。此文讲述的便是IEnumerable和IQueryable的区别。 微软对IEnumerable的定义使用场景为Linq to Object,也就是涉及到内存操作时使用。
1022 0
Java中getAttribute getParameter 区别
网上说的不少,发现都是同一篇,汗。。。。。 (1)HttpServletRequest类有setAttribute()方法,而没有setParameter()方法 (2)当两个Web组件之间为链接关系时,被链接的组件通过getParameter()方法来获得请求参数, (3)当两个Web组件之间为转发关系时,转发目标组件通过getAttribute()方法来和转发源组件共享request范围内的数据。
724 0
+关注
webmirror
Good good study, day day up
103
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载