JQuery中serialize()用法实例分析

本文实例讲述了JQuery中serialize()用法。分享给大家供大家参考。具体分析如下：

一、serialize()定义和用法：

serialize()方法通过序列化表单值，创建标准的URL编码文本字符串，它的操作对象是代表表单元素集合的jQuery 对象。你可以选择一个或多个表单元素（比如input或文本框），或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法：

$(selector).serialize()

详细说明

1、.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

2、.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 , 以及 <select>。不过，选择 <form> <a href="https://www.f2er.com/tag/biaoqian/" target="_blank" class="keywords">标签</a>本身进行序列化一般更容易些</p> <p>3、只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name <a href="https://www.f2er.com/tag/shuxing/" target="_blank" class="keywords">属性</a>。 <p>4、form里面的name不能够用 Js、jquery里的关键字。<br /> 例如：length<br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="19794" class="copybut" id="copybut19794" onclick="doCopy('code19794')"><U></U></a> <a href="https://www.f2er.com/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code19794"><form id="form1"></p> <input name="length" type="text" value="pipi" /> <input name="blog" type="text" value="blue submarine" /> </form></p> <p>//使用:$("#form1").serialize();</div></p> <p>上面则<a href="https://www.f2er.com/tag/huoqu/" target="_blank" class="keywords">获取</a>不到值。 <p>二、JQuery中serialize()实例</p> <p>1、ajax serialize()<br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="11508" class="copybut" id="copybut11508" onclick="doCopy('code11508')"><U></U></a> <a href="https://www.f2er.com/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code11508">$.ajax({<br /> type: "POST",<br /> dataType: "json",<br /> url:ajaxCallBack,<br /> data:$('#myForm').serialize(),// 要提交表单的ID<br /> success: function(msg){<br /> alert(msg);<br /> }<br /> });</div></p></p> <p>2、serialize() 序列化表单实例 <div class="codetitle"><span><a style="CURSOR: pointer" data="89482" class="copybut" id="copybut89482" onclick="doCopy('code89482')"><U></U></a> <a href="https://www.f2er.com/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code89482"><script src="jquery-1.7.min。js"></script> <script> $(function(){ $("#submit").click(function(){ alert($("#myForm").serialize()); }); }); </script> <form id="myForm"> 昵称 <input type="text" name="username" value="admin" /><br /> 密码 <input type="password" name="password" value="admin123" /><br /> <input type="button" id="submit" value="序列化表单" /> </form></div></p> <p>点击按钮之后弹出：</p> <p>username=admin&password=admin123 <p>三、serialize是用param<a href="https://www.f2er.com/tag/fangfa/" target="_blank" class="keywords">方法</a>对serializeArray的一个简单包装</p> <p>1、$.param()</p></p> <p>$.param()<a href="https://www.f2er.com/tag/fangfa/" target="_blank" class="keywords">方法</a>是serialize()<a href="https://www.f2er.com/tag/fangfa/" target="_blank" class="keywords">方法</a>的核心，用来对一个数组或对象按照key/value进行序列化。 <p>param<a href="https://www.f2er.com/tag/fangfa/" target="_blank" class="keywords">方法</a>的js<a href="https://www.f2er.com/tag/daima/" target="_blank" class="keywords">代码</a><br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="29003" class="copybut" id="copybut29003" onclick="doCopy('code29003')"><U></U></a> <a href="https://www.f2er.com/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code29003">param: function( a ) {<br /> /// <summary><br /> /// This method is internal. Use serialize() instead.<br /> /// </summary><br /> /// <param name="a" type="Map">A map of key/value pairs to serialize into a string.</param>'<br /> /// <returns type="String" /><br /> /// <private /></p></p> <p>var s = [ ];</p> <p>function add( key,value ){ s[ s.length ] = encodeURIComponent(key) + '=' + encodeURIComponent(value); };</p> <p>// If an array was passed in,assume that it is an array // of form elements if ( jQuery.isArray(a) || a.jquery ) // Serialize the form elements jQuery.each( a,function(){ add( this.name,this.value ); });</p> <p>// Otherwise,assume that it's an object of key/value pairs else // Serialize the key/values for ( var j in a ) // If the value is an array then the key names need to be repeated if ( jQuery.isArray(a[j]) ) jQuery.each( a[j],function(){ add( j,this ); }); else add( j,jQuery.isFunction(a[j]) ? a[j]() : a[j] );</p> <p>// Return the resulting serialization return s.join("&").replace(/%20/g,"+"); }</div></p> <p>例如： <div class="codetitle"><span><a style="CURSOR: pointer" data="10440" class="copybut" id="copybut10440" onclick="doCopy('code10440')"><U></U></a> <a href="https://www.f2er.com/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code10440">var obj = {a:1,b:2,c:3}; var k = $.param(obj); alert(k); //<a href="https://www.f2er.com/tag/shuchu/" target="_blank" class="keywords">输出</a>a=1&b=2&c=3</div> <p>2、serializeArray</p> <p>serializeArray<a href="https://www.f2er.com/tag/fangfa/" target="_blank" class="keywords">方法</a>是将一个表单当中的各个字段序列化成一个数组<br /> serializeArray<a href="https://www.f2er.com/tag/fangfa/" target="_blank" class="keywords">方法</a>的jquery定义<br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="92687" class="copybut" id="copybut92687" onclick="doCopy('code92687')"><U></U></a> <a href="https://www.f2er.com/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code92687">serializeArray: function() {<br /> /// <summary><br /> /// Serializes all forms and form elements but returns a JSON data structure.<br /> /// </summary><br /> /// <returns type="String">A JSON data structure representing the serialized items.</returns></p></p> <p>return this.map(function(){ return this.elements ? jQuery.makeArray(this.elements) : this; }) .filter(function(){ return this.name && !this.disabled && (this.checked || /select|textarea/i.test(this.nodeName) || /text|hidden|password|search/i.test(this.type)); }) .map(function(i,elem){ var val = jQuery(this).val(); return val == null ? null : jQuery.isArray(val) ? jQuery.map( val,function(val,i){ return {name: elem.name,value: val}; }) : {name: elem.name,value: val}; }).get(); }</div></p> <p>serializeArray数据例子： <div class="codetitle"><span><a style="CURSOR: pointer" data="19390" class="copybut" id="copybut19390" onclick="doCopy('code19390')"><U></U></a> <a href="https://www.f2er.com/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code19390">[ { name : username, value : 中国 },{ name : password, value : xxx }]</div></p> <p>希望本文所述对大家的jQuery程序设计有所帮助。</p><div class="topcard-tags"><a href="/tag/serialize/" class="tag_link" target="_blank">serialize()</a><a href="/tag/yongfa/" class="tag_link" target="_blank">用法</a><a href="/tag/yongfap/" class="tag_link" target="_blank">用法</a></div> </div> </div> </div>  <div class="clearfix"></div>  <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>相关文章</h1></div><div class="list_con"> <div class="title"> <a href="/jquery/994522.html" title="《锋利的jQuery》笔记：插件的使用和写法">《锋利的jQuery》笔记：插件的使用和写法</a> </div> <div class="summary">jQuery插件的种类 1、封装对象方法这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进...</div> </div><div class="list_con"> <div class="title"> <a href="/jquery/994521.html" title="jQuery插件开发入门">jQuery插件开发入门</a> </div> <div class="summary">扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。入门编写一个jQuery插件开始于给...</div> </div><div class="list_con"> <div class="title"> <a href="/jquery/994520.html" title="jquery.roundabout.js实现3D图片层叠旋转木马切换">jquery.roundabout.js实现3D图片层叠旋转木马切换</a> </div> <div class="summary">最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。兼容性如图： ht...</div> </div><div class="list_con"> <div class="title"> <a href="/jquery/994519.html" title="jQuery效果之jQuery实现图片的依次加载图片">jQuery效果之jQuery实现图片的依次加载图片</a> </div> <div class="summary">css代码： js代码：</div> </div><div class="list_con"> <div class="title"> <a href="/jquery/994518.html" title="jQuery之deferred对象详解">jQuery之deferred对象详解</a> </div> <div class="summary">一、什么是deferred对象？开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异...</div> </div><div class="list_con"> <div class="title"> <a href="/jquery/994517.html" title="jQuery 对AMD的支持（Require.js中如何使用jQuery）">jQuery 对AMD的支持（Require.js中如何使用jQuery）</a> </div> <div class="summary">AMD 模块 AMD（异步模块定义，Asynchronous Module Definition）格式总体的目标是为现在的开发者提供一...</div> </div></div> </div>  </div> </div> <footer id="footer"> <div class="container"> <div class="copyright"> Copyright © 2018 前端之家. 当前版本 V7.0.16<br> <span class="ml5">前端之家版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-10</a> </div> </div> </footer> <script src="/js/base.js"></script> </body> </html>