Beispielanalyse der Verwendung von serialize() in JQuery_jquery

Das Beispiel in diesem Artikel beschreibt die Verwendung von serialize() in JQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Definition und Verwendung von serialize():

Die

serialize()-Methode erstellt eine standardmäßige URL-codierte Textzeichenfolge durch Serialisierung von Formularwerten. Ihr Operationsobjekt ist ein jQuery-Objekt, das eine Sammlung von Formularelementen darstellt. Sie können ein oder mehrere Formularelemente (z. B. Eingaben oder Textfelder) oder das Formularelement selbst auswählen. Serialisierte Werte können in URL-Abfragezeichenfolgen verwendet werden, wenn AJAX-Anfragen gestellt werden.

Syntax:

$(selector).serialize()

Detaillierte Beschreibung

1. Die Methode .serialize() erstellt eine Textzeichenfolge, die durch die Standard-URL-Codierung dargestellt wird. Es arbeitet mit einem jQuery-Objekt, das eine Sammlung von Formularelementen darstellt.

2. Die Methode .serialize() kann jQuery-Objekte bedienen, die einzelne Formularelemente wie , haben. Im Allgemeinen ist es jedoch einfacher, das <form>-Tag selbst zu serialisieren</p> <p>3. Nur „erfolgreiche Kontrollen“ werden in Zeichenfolgen serialisiert. Wenn Sie zum Absenden des Formulars keine Schaltfläche verwenden, wird der Wert der Absenden-Schaltfläche nicht serialisiert. Wenn der Wert eines Formularelements in eine Sequenzzeichenfolge aufgenommen werden soll, muss das Element ein Namensattribut verwenden. <br> <br> 4. Der Name im Formular kann keine Schlüsselwörter in Js und Jquery verwenden. <br> Zum Beispiel: Länge<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="30392" class="copybut" id="copybut30392" onclick="doCopy('code30392')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code30392"><form id="form1"><br> <input name="length" type="text" value="pipi" /><br> <input name="blog" type="text" value="blue submarine" /><br> </form> <p>//Verwenden Sie:$("#form1").serialize();</p> </div> <p>Der oben genannte Wert kann nicht erhalten werden. <br> <br> 2. Beispiel für serialize() in 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>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code22106">$.ajax({<br> Geben Sie ein: „POST“,<br> Datentyp: „json“,<br> url:ajaxCallBack,<br> Daten:$('#myForm').serialize(),//Die ID des Formulars, das übermittelt werden soll<br> Erfolg: function(msg){<br> alarm(msg);<br> }<br> });</div> <p>2. serialize() Formularinstanz serialisieren<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="79" class="copybut" id="copybut79" onclick="doCopy('code79')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code79"><script src="jquery-1.7.min.js"> ;< /script><br> <script><br> $(function(){<br> $("#submit").click(function(){<br> ​​alert($("#myForm").serialize());<br> });<br> });<br> </script><br> <form id="myForm"><br> Spitzname <input type="text" name="username" value="admin" /><br /><br> Passwort <input type="password" name="password" value="admin123" /><br /><br> <input type="button" id="submit" value="serialized form" /> </form><br> </div> Nachdem Sie auf die Schaltfläche geklickt haben, erscheint Folgendes: <p> </p>Benutzername=admin&password=admin123<p> <br> 3. Serialize ist ein einfacher Wrapper für serializeArray, der die param-Methode <br> verwendet <br> 1. $.param()<br> </p>Die Methode $.param() ist der Kern der Methode serialize(), die zum Serialisieren eines Arrays oder Objekts nach Schlüssel/Wert verwendet wird. <p> <br> js-Code der Param-Methode<br> <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="39600" class="copybut" id="copybut39600" onclick="doCopy('code39600')">Code kopieren<u></u></a> Der Code lautet wie folgt:</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>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="js-Methode zur Implementierung Wählen Sie das Dropdown-Feld mit den Eingabefunktionen_javascript-Kenntnissen aus" href="http://m.php.cn/de/faq/8967.html">js-Methode zur Implementierung Wählen Sie das Dropdown-Feld mit den Eingabefunktionen_javascript-Kenntnissen aus</a></span><span>Nächster Artikel：<a class="dBlack" title="js-Methode zur Implementierung Wählen Sie das Dropdown-Feld mit den Eingabefunktionen_javascript-Kenntnissen aus" href="http://m.php.cn/de/faq/8969.html">js-Methode zur Implementierung Wählen Sie das Dropdown-Feld mit den Eingabefunktionen_javascript-Kenntnissen aus</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</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/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</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/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</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/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</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:setlang('ms');" class="language course-right-orders chooselan " 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:;" class="language course-right-orders chooselan chooselanguage" 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>