JQuery_jquery での Serialize() の使用法の分析例

この記事の例では、JQuery での Serialize() の使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1. Serialize() の定義と使用法:

serialize() メソッドは、フォーム値をシリアル化することによって、標準の URL エンコードされたテキスト文字列を作成します。その操作オブジェクトは、フォーム要素のコレクションを表す jQuery オブジェクトです。 1 つ以上のフォーム要素 (入力フィールドやテキスト フィールドなど)、またはフォーム要素自体を選択できます。シリアル化された値は、AJAX リクエストを行うときに URL クエリ文字列で使用できます。

構文:

$(selector).serialize()

詳しい説明

1. .serialize() メソッドは、標準の URL エンコーディングで表されるテキスト文字列を作成します。これは、フォーム要素のコレクションを表す jQuery オブジェクトを操作します。

2. .serialize() メソッドは、、、<select> などの個別のフォーム要素を選択した jQuery オブジェクトを操作できます。ただし、一般的には <form> タグ自体をシリアル化する方が簡単です。 </p>3. 「成功したコントロール」のみが文字列にシリアル化されます。ボタンを使用してフォームを送信しない場合、送信ボタンの値はシリアル化されません。フォーム要素の値をシーケンス文字列に含める場合は、要素で name 属性を使用する必要があります。 <p> <br> 4. フォーム内の名前には、Js および jquery のキーワードを使用できません。 <br> 例: 長さ<br> <br></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="30392" class="copybut" id="copybut30392" onclick="doCopy('code30392')">コードをコピー<u></u></a> コードは次のとおりです:</span></div><form id="form1"><div class="codebody" id="code30392"> <input name="length" type="text" value="pipi" /><br> <input name="ブログ" type="text" value="青い潜水艦" /><br> </form><br> //使用:$("#form1").serialize();<p></p> </div> 上記の値は取得できません。 <p> <br> 2. JQuery<br>のserialize()の例 <br> 1. ajax シリアル化()<br> <br></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="22106" class="copybut" id="copybut22106" onclick="doCopy('code22106')">コードをコピー<u></u></a> コードは次のとおりです。</span></div>$.ajax({<div class="codebody" id="code22106"> 入力: "POST"、<br> データ型: "json"、<br> url:ajaxCallBack、<br> Data:$('#myForm').serialize(),//送信するフォームのID<br> 成功: function(msg){<br> アラート(メッセージ);<br> }<br> });<br> </div> 2.serialize() フォームインスタンスをシリアル化します<p> <br></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="79" class="copybut" id="copybut79" onclick="doCopy('code79')">コードをコピーします<u></u></a> コードは次のとおりです:</span></div><script src="jquery-1.7.min.js"> ;< /スクリプト><div class="codebody" id="code79"> <スクリプト><br> $(関数(){<br> $("#submit").click(function(){<br> alert($("#myForm").serialize());<br> });<br> });<br> </script><br> <form id="myForm"><br> ニックネーム <input type="text" name="username" value="admin" /><br /><br> パスワード <input type="password" name="password" value="admin123" /><br /><br> <input type="button" id="submit" value="シリアル化されたフォーム" /> </form><br><br> </div>ボタンをクリックすると、次のポップアップが表示されます: <p>ユーザー名=管理者&パスワード=admin123</p> <p> 3. Serialize は、param メソッド <br> を使用する、serializeArray の単純なラッパーです。 <br> 1. $.param()<br> <br>$.param() メソッドは、serialize() メソッドの中核であり、キー/値に従って配列またはオブジェクトをシリアル化するために使用されます。 </p> <p> paramメソッドのjsコード<br> <br><br></p> <div class="codetitle"><span>コードをコピー<a style="CURSOR: pointer" data="39600" class="copybut" id="copybut39600" onclick="doCopy('code39600')"><u></u> コードは次のとおりです:</a><div class="codebody" id="code39600">パラメータ: function( a ) {<br> /// <概要><br> /// このメソッドは内部メソッドです。  代わりに、serialize() を使用してください。<br> /// </まとめ><br> /// <param name="a" type="Map">文字列にシリアル化するキーと値のペアのマップ。</param>'<br> /// <returns type="String" /><br> /// <プライベート /> <p>var s = [ ];</p> <p>関数 add( キー, 値 ){<br>     s[ s.length ] = encodeURIComponent(key) '=' encodeURIComponent(value);<br> };</p> <p>// 配列が渡された場合は、それが配列であると仮定します<br> // フォーム要素<br> if ( jQuery.isArray(a) || a.jquery )<br>     // フォーム要素をシリアル化します<br>     jQuery.each( a, function(){<br>  add( this.name, this.value );<br>     });</p> <p>// それ以外の場合は、キーと値のペアのオブジェクトであると想定します<br> それ以外<br>     // キー/値をシリアル化します<br>     for ( var j in a )<br>  // 値が配列の場合、キー名を繰り返す必要があります<br>  if ( jQuery.isArray(a[j]) )<br>      jQuery.each( a[j], function(){<br>   add( j, this );<br>      });<br>  それ以外<br>      add( j, jQuery.isFunction(a[j]) ? a[j]() : a[j] );</p> <p>// 結果のシリアル化を返します<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> アラート(k);    //输出a=1&b=2&c=3</div> <br>  <br> 2、配列のシリアル化<br>  <br> SerializeArray メソッドは、1 つの表内の各フィールドの順序を 1 つの数組に整列化します<br> SerializeArray メソッドの jquery 定義<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> /// <概要><br> /// すべてのフォームとフォーム要素をシリアル化しますが、JSON データ構造を返します。<br> /// </まとめ><br> /// <returns type="String">シリアル化された項目を表す JSON データ構造。</returns> <p>return this.map(function(){<br>     this.elements を返しますか? jQuery.makeArray(this.elements) : this;<br> })<br> .filter(function(){<br>     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>     戻り値 == null ? null :<br>  jQuery.isArray(val) ?<br>      jQuery.map( val, function(val, i){<br>   return {名前: elem.name、値: val};<br>      }) :<br>      {名前: elem.name、値: 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>  名前: ユーザー名、<br>  値: 中国 <br>  }、{<br>  名前: パスワード、<br>  値: xxx <br> }]</div> <p> ここで説明されている大規模な jQuery プログラムの設計が役立つことを望みます。</p></span></div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="入力関数を使用して選択ドロップダウン ボックスを実装する js メソッド function_javascript スキル" href="http://m.php.cn/ja/faq/8967.html">入力関数を使用して選択ドロップダウン ボックスを実装する js メソッド function_javascript スキル</a></span><span>次の記事：<a class="dBlack" title="入力関数を使用して選択ドロップダウン ボックスを実装する js メソッド function_javascript スキル" href="http://m.php.cn/ja/faq/8969.html">入力関数を使用して選択ドロップダウン ボックスを実装する js メソッド function_javascript スキル</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/1609.html" title="Bootstrap リスト グループ コンポーネントの詳細な分析" class="aBlack">Bootstrap リスト グループ コンポーネントの詳細な分析</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1640.html" title="JavaScript関数のカリー化の詳細説明" class="aBlack">JavaScript関数のカリー化の詳細説明</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1949.html" title="JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)" class="aBlack">JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2248.html" title="Angularjs は WeChat UI (weui) を統合します" class="aBlack">Angularjs は WeChat UI (weui) を統合します</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2351.html" title="JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル" class="aBlack">JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル</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/ja/"><b class="icon1"></b><p>ホームページ</p></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><p>コース</p></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><p>に質問</p></a></li><li><a href="http://m.php.cn/ja/login"><b class="icon5"></b><p>私の</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/ja/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><span>ホームページ</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><span>コース</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/article.html"><b class="icon3"></b><span>記事</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><span>に質問</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/dic.html"><b class="icon6"></b><span>辞書</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course/type/99.html"><b class="icon7"></b><span>マニュアル</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/xiazai/"><b class="icon8"></b><span>ダウンロード</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/faq/zt" title="特集"><b class="icon12"></b><span>特集</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/ja/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ja/" >ホームページ</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/article.html" class="hover">記事</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/wenda.html" >に質問</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/course.html" >コース</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/faq/zt" >特集</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/xiazai" >ダウンロード</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/game" >ゲーム</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/dic.html" >辞書</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:;" class="language course-right-orders chooselan chooselanguage" 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: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>