<div id="article_content" class="article_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu_307" data-dsm="post"> <div class="article-copyright"> 版權聲明：本文爲博主原創文章，未經博主容許不得轉載。 https://blog.csdn.net/qq_38602656/article/details/78668924 </div> <div class="markdown_views"> <!-- flowchart 箭頭圖標 勿刪 --> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg> <ul> <li><p><strong>jQuery Form簡介</strong></p>javascript
<p>jQuery Form插件是一個優秀的Ajax表單插件，能夠很是容易地、無侵入地升級HTML表單以支持Ajax。 <br> jQuery Form有兩個核心方法 – ajaxForm() 和 ajaxSubmit()， 它們集合了從控制表單元素到決定如何管理提交進程的功能。</p></li> <li><p><strong>下載地址</strong></p>css
<p><a href="http://malsup.github.io/jquery.form.js" rel="nofollow" target="_blank">http://malsup.github.io/jquery.form.js</a></p></li> <li><p><strong>簡單介紹</strong> <br> jQuery form插件的使用–ajaxForm()和ajaxSubmit()的可選參數項對象。 <br> 使用前引入JS文件：</p></li> </ul>html
<pre class="prettyprint" name="code"><code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"jquery.js"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"jquery.form.js"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> </code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>java
<pre class="prettyprint" name="code"><code class="hljs javascript has-numbering">$(<span class="hljs-string">'#myForm'</span>).ajaxForm(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span> $(<span class="hljs-string">'#output1'</span>).html(<span class="hljs-string">"提交成功！歡迎下次再來！"</span>).show(); }); $(<span class="hljs-string">'#myForm2'</span>).submit(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span> $(<span class="hljs-keyword">this</span>).ajaxSubmit(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span> $(<span class="hljs-string">'#output2'</span>).html(<span class="hljs-string">"提交成功！歡迎下次再來！"</span>).show(); }); <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-comment">//阻止表單默認提交</span> });</code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre>jquery
<blockquote> <p>經過Form插件的兩個核心方法，均可以在不修改表單的HTML代碼結構的狀況下，輕易地將表單的提交方式升級爲Ajax提交方式</p>git
<p>ajaxForm() 和 ajaxSubmit() 都能接受0個或1個參數，當爲單個參數時，該參數既能夠是一個回調函數，也能夠是一個options對象，上面的例子就是回調函數，下面介紹options對象，使得它們對錶單擁有更多的控制權。</p> </blockquote>github
<pre class="prettyprint" name="code"><code class="hljs javascript has-numbering"><span class="hljs-keyword">var</span> options = { target: <span class="hljs-string">'#output'</span>, <span class="hljs-comment">//把服務器返回的內容放入id爲output的元素中 </span> beforeSubmit: showRequest, <span class="hljs-comment">//提交前的回調函數</span> success: showResponse, <span class="hljs-comment">//提交後的回調函數</span> <span class="hljs-comment">//url: url, //默認是form的action， 若是申明，則會覆蓋</span> <span class="hljs-comment">//type: type, //默認是form的method（get or post），若是申明，則會覆蓋</span> <span class="hljs-comment">//dataType: null, //html(默認), xml, script, json...接受服務端返回的類型</span> <span class="hljs-comment">//clearForm: true, //成功提交後，清除全部表單元素的值</span> <span class="hljs-comment">//resetForm: true, //成功提交後，重置全部表單元素的值</span> timeout: <span class="hljs-number">3000</span> <span class="hljs-comment">//限制請求的時間，當請求大於3秒後，跳出請求</span> } <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">showRequest</span><span class="hljs-params">(formData, jqForm, options)</span>{</span> <span class="hljs-comment">//formData: 數組對象，提交表單時，Form插件會以Ajax方式自動提交這些數據，格式如：[{name:user,value:val },{name:pwd,value:pwd}]</span> <span class="hljs-comment">//jqForm: jQuery對象，封裝了表單的元素 </span> <span class="hljs-comment">//options: options對象</span> <span class="hljs-keyword">var</span> queryString = $.param(formData); <span class="hljs-comment">//name=1&address=2</span> <span class="hljs-keyword">var</span> formElement = jqForm[<span class="hljs-number">0</span>]; <span class="hljs-comment">//將jqForm轉換爲DOM對象</span> <span class="hljs-keyword">var</span> address = formElement.address.value; <span class="hljs-comment">//訪問jqForm的DOM元素</span> <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>; <span class="hljs-comment">//只要不返回false，表單都會提交,在這裏能夠對錶單元素進行驗證</span> }; <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">showResponse</span><span class="hljs-params">(responseText, statusText)</span>{</span> <span class="hljs-comment">//dataType=xml</span> <span class="hljs-keyword">var</span> name = $(<span class="hljs-string">'name'</span>, responseXML).text(); <span class="hljs-keyword">var</span> address = $(<span class="hljs-string">'address'</span>, responseXML).text(); $(<span class="hljs-string">"#xmlout"</span>).html(name + <span class="hljs-string">" "</span> + address); <span class="hljs-comment">//dataType=json</span> $(<span class="hljs-string">"#jsonout"</span>).html(data.name + <span class="hljs-string">" "</span> + data.address); }; $(<span class="hljs-string">"#myForm"</span>).ajaxForm(options); $(<span class="hljs-string">"#myForm2"</span>).submit(funtion(){ $(<span class="hljs-keyword">this</span>).ajaxSubmit(options); <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-comment">//阻止表單默認提交</span> });</code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li></ul></pre>web
<blockquote> <p>表單提交以前進行驗證： beforeSubmit會在表單提交前被調用，若是beforeSubmit返回false，則會阻止表單提交</p> </blockquote>ajax
<pre class="prettyprint" name="code"><code class="hljs javascript has-numbering">beforeSubmit: validate <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">validate</span><span class="hljs-params">(formData, jqForm, options)</span> {</span> <span class="hljs-comment">//在這裏對錶單進行驗證，若是不符合規則，將返回false來阻止表單提交，直到符合規則爲止</span> <span class="hljs-comment">//方式一：利用formData參數</span> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>; i < formData.length; i++) { <span class="hljs-keyword">if</span> (!formData[i].value) { alert(<span class="hljs-string">'用戶名,地址和自我介紹都不能爲空!'</span>); <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; } } <span class="hljs-comment">//方式二：利用jqForm對象</span> <span class="hljs-keyword">var</span> form = jqForm[<span class="hljs-number">0</span>]; <span class="hljs-comment">//把表單轉化爲dom對象</span> <span class="hljs-keyword">if</span> (!form.name.value || !form.address.value) { alert(<span class="hljs-string">'用戶名和地址不能爲空，自我介紹能夠爲空！'</span>); <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; } <span class="hljs-comment">//方式三：利用fieldValue()方法，fieldValue 是表單插件的一個方法，它能找出表單中的元素的值，返回一個集合。</span> <span class="hljs-keyword">var</span> usernameValue = $(<span class="hljs-string">'input[name=name]'</span>).fieldValue(); <span class="hljs-keyword">var</span> addressValue = $(<span class="hljs-string">'input[name=address]'</span>).fieldValue(); <span class="hljs-keyword">if</span> (!usernameValue[<span class="hljs-number">0</span>] || !addressValue[<span class="hljs-number">0</span>]) { alert(<span class="hljs-string">'用戶名和地址不能爲空，自我介紹能夠爲空！'</span>); <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; } <span class="hljs-keyword">var</span> queryString = $.param(formData); <span class="hljs-comment">//組裝數據</span> <span class="hljs-comment">//alert(queryString); //相似 ： name=1&add=2 </span> <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>; }</code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li></ul></pre>json
<ul> <li><p><strong>參數介紹</strong> <br> ajaxForm()和ajaxSubmit()的可選參數項對象：</p>
<p>ajaxForm 和 ajaxSubmit 都支持大量的可選參數，它們經過可選參數項對象傳入。可選參數項對象只是一個簡單的 JavaScript對象，裏邊包含了一些屬性和一些值: <br> <strong>target</strong> <br> 用server端返回的內容更換指定的頁面元素的內容。 這個值能夠用jQuery 選擇器來表示, 或者是一個jQuery 對象， 一個 DOM 元素。 <br> 缺省值： null <br> <strong>url</strong> <br> 表單提交的地址。 <br> 缺省值： 表單的action的值 <br> <strong>type</strong> <br> 表單提交的方式，’GET’ 或 ‘POST’. <br> 缺省值： 表單的 method 的值 (若是沒有指明則認爲是 ‘GET’) <br> <strong>beforeSubmit</strong> <br> 表單提交前執行的方法。 <br> 這個能夠用在表單提交前的預處理，或表單校驗。 <br> 若是’beforeSubmit’指定的函數返回false，則表單不會被提交。 ‘beforeSubmit’函數調用時須要3個參數：數組形式的表單數據，jQuery 對象形式的表單對象，可選的用來傳遞給ajaxForm/ajaxSubmit 的對象。 <br> 數組形式的表單數據是下面這樣的格式：[ { name: ‘username’, value: ‘jresig’ }, { name: ‘password’, value: ‘secret’ } ] <br> 缺省值： null <br> <strong>success</strong> <br> 當表單提交後執行的函數。 若是’success’ 回調函數被指定，當server端返回對錶單提交的響應後，這個方法就會被執行。 responseText 和 responseXML 的值會被傳進這個參數 (這個要依賴於dataType的類型). <br> 缺省值： null <br> <strong>dataType</strong> <br> 指定服務器響應返回的數據類型。其中之一: null, ‘xml’, ‘script’, 或者 ‘json’. 這個 dataType 選項用來指示你如何去處理server端返回的數據。 這個和 jQuery.httpData 方法直接相對應。 <br> 下面就是能夠用的選項： <br> ‘xml’: 若是 dataType == ‘xml’ 則 server 端返回的數據被看成是 XML 來處理， 這種狀況下’success’指定的回調函數會被傳進去 responseXML 數據 <br> ‘json’: 若是 dataType == ‘json’ 則server端返回的數據將會被執行，並傳進’success’回調函數 <br> ‘script’: 若是 dataType == ‘script’ 則server端返回的數據將會在上下文的環境中被執行 <br> 缺省值： null <br> <strong>semantic</strong> <br> 一個布爾值，用來指示表單裏提交的數據的順序是否須要嚴格按照語義的順序。通常表單的數據都是按語義順序序列化的，除非表單裏有一個type=」image」元素. 因此只有當表單裏必需要求有嚴格順序而且表單裏有type=」image」時才須要指定這個。 <br> 缺省值： false <br> <strong>resetForm</strong> <br> 布爾值，指示表單提交成功後是否須要重置。 <br> 缺省值： null <br> <strong>clearForm</strong> <br> 布爾值，指示表單提交成功後是否須要清空。 <br> 缺省值： null <br> <strong>iframe</strong> <br> 布爾值，用來指示表單是否須要提交到一個iframe裏。 這個用在表單裏有file域要上傳文件時。更多信息請參考 代碼示例 頁面裏的File Uploads 文檔。 <br> 缺省值： false</p></li> </ul> </div> <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-8cccb36679.css" rel="stylesheet"> </div>