Contoh analisis penggunaan serialize() dalam JQuery_jquery

Contoh dalam artikel ini menerangkan penggunaan serialize() dalam JQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

1. Definisi dan penggunaan serialize():

Kaedah

serialize() mencipta rentetan teks berkod URL standard dengan menyerikan nilai borang Objek operasinya ialah objek jQuery yang mewakili koleksi elemen borang. Anda boleh memilih satu atau lebih elemen borang (seperti input atau medan teks), atau elemen borang itu sendiri. Nilai bersiri boleh digunakan dalam rentetan pertanyaan URL apabila membuat permintaan AJAX.

Sintaks:

$(selector).serialize()

Penerangan terperinci

1. Kaedah .serialize() mencipta rentetan teks yang diwakili oleh pengekodan URL standard. Ia beroperasi pada objek jQuery yang mewakili koleksi elemen bentuk.

2. Kaedah .serialize() boleh mengendalikan objek jQuery yang mempunyai elemen bentuk individu, seperti , dan <select>. Walau bagaimanapun, biasanya lebih mudah untuk mensiri teg <form> itu sendiri</p> <p>3. Hanya "kawalan yang berjaya" akan disiri menjadi rentetan. Jika anda tidak menggunakan butang untuk menyerahkan borang, nilai butang hantar tidak bersiri. Jika anda mahu nilai elemen borang dimasukkan dalam rentetan jujukan, elemen mesti menggunakan atribut nama. <br> <br> 4. Nama dalam borang tidak boleh menggunakan kata kunci dalam Js dan jquery. <br> Contohnya: panjang<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="30392" class="copybut" id="copybut30392" onclick="doCopy('code30392')"><u>Salin kod</u></a></span> Kod adalah seperti berikut:</div> <div class="codebody" id="code30392"><form id="form1"><br> <input name="length" type="text" value="pipi" /><br> <input name="blog" type="text" value="kapal selam biru" /><br> </form> <p>//Gunakan:$("#form1").serialize();</p> </div> <p>Nilai di atas tidak boleh diperolehi. <br> <br> 2. Contoh serialize() dalam JQuery<br> <br> 1. ajax serialize()<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="22106" class="copybut" id="copybut22106" onclick="doCopy('code22106')"><u>Salin kod</u></a></span> Kod adalah seperti berikut:</div> <div class="codebody" id="code22106">$.ajax({<br> Taip: "POST",<br> Jenis Data: "json",<br> url:ajaxCallBack,<br> Data:$('#myForm').serialize(),//ID borang yang akan diserahkan<br> Kejayaan: function(msg){<br> makluman(msg);<br> }<br> });</div> <p>2. bersiri() contoh borang bersiri<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="79" class="copybut" id="copybut79" onclick="doCopy('code79')"><u>Salin kod</u></a></span> Kod adalah seperti berikut:</div> <div class="codebody" id="code79"><script src="jquery-1.7.min.js"> ;< /skrip><br> <skrip><br> $(fungsi(){<br> $("#submit").klik(function(){<br> ​​ alert($("#myForm").serialize());<br> });<br> });<br> </skrip><br> <form id="myForm"><br> Nama panggilan <input type="text" name="username" value="admin" /><br /><br> Kata laluan <input type="password" name="password" value="admin123" /><br /><br> <input type="button" id="submit" value="borang bersiri" /> </form><br> </div> Selepas mengklik butang, ia akan muncul: <p> </p>nama pengguna=admin&kata laluan=admin123<p> <br> 3. Serialize ialah pembalut mudah untuk serializeArray menggunakan kaedah param <br> <br> 1. $.param()<br> </p>Kaedah $.param() ialah teras kaedah serialize(), yang digunakan untuk mensiri tatasusunan atau objek mengikut kunci/nilai. <p> <br> kod js kaedah param<br> <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="39600" class="copybut" id="copybut39600" onclick="doCopy('code39600')">Salin kod<u></u></a> Kod adalah seperti berikut:</span><div class="codebody" id="code39600">param: function( a ) {<br> ///    <summary><br> ///        Diese Methode ist intern.  Verwenden Sie stattdessen serialize().<br> ///    </summary><br> ///    <param name="a" type="Map">Eine Zuordnung von Schlüssel/Wert-Paaren zur Serialisierung in einen String.</param>'<br> ///    <returns type="String" /><br> ///    <privat /> <p>var s = [ ];</p> <p>Funktion add( Schlüssel, Wert){<br>     s[ s.length ] = encodeURIComponent(key) '=' encodeURIComponent(value);<br> };</p> <p>// Wenn ein Array übergeben wurde, gehe davon aus, dass es sich um ein Array handelt<br> // von Formularelementen<br> if ( jQuery.isArray(a) || a.jquery )<br>     // Serialisieren Sie die Formularelemente<br>     jQuery.each( a, function(){<br>  add( this.name, this.value );<br>     });</p> <p>// Ansonsten gehen wir davon aus, dass es sich um ein Objekt von Schlüssel/Wert-Paaren handelt<br> sonst<br>     // Schlüssel/Werte serialisieren<br>     für ( var j in a )<br>  // Wenn der Wert ein Array ist, müssen die Schlüsselnamen wiederholt werden<br>  if ( jQuery.isArray(a[j]) )<br>      jQuery.each( a[j], function(){<br>   add( j, this );<br>      });<br>  sonst<br>      add( j, jQuery.isFunction(a[j]) ? a[j]() : a[j] );</p> <p>// Gibt die resultierende Serialisierung zurück<br> return s.join("&").replace(/ /g, " ");<br> }</p> </div> <p>例如:<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="21038" class="copybut" id="copybut21038" onclick="doCopy('code21038')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code21038">var obj = {a:1,b:2,c:3};<br> var k = $.param(obj);<br> alarm(k);    //输出a=1&b=2&c=3</div> <br>  <br> 2、serializeArray<br>  <br> serializeArray ist die erste Instanz, die Sie als Nächstes verwenden können.<br> serializeArray ist eine jquery-Funktion<br> <div class="codetitle"> <span><a style="CURSOR: pointer" data="3284" class="copybut" id="copybut3284" onclick="doCopy('code3284')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code3284">serializeArray: function() {<br> ///    <summary><br> ///        Serialisiert alle Formulare und Formularelemente, gibt aber eine JSON-Datenstruktur zurück.<br> ///    </summary><br> ///    <returns type="String">Eine JSON-Datenstruktur, die die serialisierten Elemente darstellt.</returns> <p>Gib this.map(function(){<br> zurück     this.elements zurückgeben? jQuery.makeArray(this.elements) : this;<br> })<br> .filter(function(){<br>     return this.name && !this.disabled &&<br>  (this.checked || /select|textarea/i.test(this.nodeName) ||<br>      /text|hidden|password|search/i.test(this.type));<br> })<br> .map(function(i, elem){<br>     var val = jQuery(this).val();<br>     Rückgabewert == null ? null :<br>  jQuery.isArray(val) ?<br>      jQuery.map( val, function(val, i){<br>   return {name: elem.name, value: val};<br>      }) :<br>      {Name: elem.name, Wert: val};<br>     }).get();<br> }</p> </div> <p>serializeArray数据例子:<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="29987" class="copybut" id="copybut29987" onclick="doCopy('code29987')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code29987">[ { <br>  Name: Benutzername, <br>  Wert: 中国 <br>  }, { <br>  Name: Passwort, <br>  Wert: xxx <br> }]</div> <p>Sie haben die jQuery-Version mit jQuery erstellt.</p> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="js untuk melaksanakan kotak lungsur Pilih dengan input function_javascript kemahiran" href="http://m.php.cn/ms/faq/8967.html">js untuk melaksanakan kotak lungsur Pilih dengan input function_javascript kemahiran</a></span><span>Artikel seterusnya：<a class="dBlack" title="js untuk melaksanakan kotak lungsur Pilih dengan input function_javascript kemahiran" href="http://m.php.cn/ms/faq/8969.html">js untuk melaksanakan kotak lungsur Pilih dengan input function_javascript kemahiran</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="http://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ms/faq/1609.html" title="Analisis mendalam bagi komponen kumpulan senarai Bootstrap" class="aBlack">Analisis mendalam bagi komponen kumpulan senarai Bootstrap</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1640.html" title="Penjelasan terperinci tentang fungsi JavaScript kari" class="aBlack">Penjelasan terperinci tentang fungsi JavaScript kari</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1949.html" title="Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)" class="aBlack">Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/2248.html" title="Angularjs menyepadukan UI WeChat (weui)" class="aBlack">Angularjs menyepadukan UI WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/2351.html" title="Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional" class="aBlack">Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><p>Rumah</p></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><p>Kursus</p></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><p>Soal Jawab</p></a></li><li><a href="http://m.php.cn/ms/login"><b class="icon5"></b><p>saya</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ms/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><span>Rumah</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><span>Kursus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><span>Soal Jawab</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/dic.html"><b class="icon6"></b><span>Kamus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/xiazai/"><b class="icon8"></b><span>Muat turun</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/faq/zt" title="Topik"><b class="icon12"></b><span>Topik</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ms/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ms/" >Rumah</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/wenda.html" >Soal Jawab</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/course.html" >Kursus</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/faq/zt" >Topik</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/xiazai" >Muat turun</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/game" >Permainan</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/dic.html" >Kamus</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>