<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>