yaofang123 发表于 2011-12-21 08:44

JQuery 实现表单提交

<div><div id="codeText" class="codeText"><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li><span style="color:#000000;">$<span style="color:#0000CC;">(</span>document<span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span>ready<span style="color:#0000CC;">(</span>function <span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span> <span style="color:#0000CC;">{</span></span></li><li>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#0000CC;">/</span><span style="color:#0000CC;">/</span>定义表单提交前与提交后的处理方法及超时相关<br></li><li>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#0000FF;">var</span> options <span style="color:#0000CC;">=</span> <span style="color:#0000CC;">{</span><br></li><li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeSubmit:showRequest<span style="color:#0000CC;">,</span><br></li><li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:showResponse<span style="color:#0000CC;">,</span><br></li><li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timeout:3000<br></li><li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#0000CC;">}</span><span style="color:#0000CC;">;</span><br></li><li>
&nbsp;&nbsp;&nbsp;&nbsp;$<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">'#myform'</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span>submit<span style="color:#0000CC;">(</span>function<span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span> <span style="color:#0000CC;">{</span>   <br></li><li>
&nbsp;&nbsp;&nbsp;&nbsp;    <span style="color:#0000CC;">/</span><span style="color:#0000CC;">/</span> submit the <span style="color:#0000FF;">form</span>   <br></li><li>
&nbsp;&nbsp;&nbsp;&nbsp;    $<span style="color:#0000CC;">(</span>this<span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span>ajaxSubmit<span style="color:#0000CC;">(</span>options<span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span>   <br></li><li>
&nbsp;&nbsp;&nbsp;&nbsp;    <span style="color:#0000CC;">/</span><span style="color:#0000CC;">/</span> return false to prevent normal browser submit and <span style="color:#FF0000;">page</span> navigation   <br></li><li>
&nbsp;&nbsp;&nbsp;&nbsp;    return false<span style="color:#0000CC;">;</span> <br></li><li>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#0000CC;">}</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span><br></li><li>
<span style="color:#0000CC;">}</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span></li><li><span style="color:#0000CC;"><li>function showRequest(formData, jqForm, options) {</li><li><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" color="#0000CC">        </font></span>return true;</li><li>}</li><li>function showResponse(responseText, statusText, xhr, $form) &nbsp;{&nbsp;</li><li><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" color="#0000CC">        </font></span>alert(responseText );&nbsp;</li><li>}</li><li><br></li><li>表单:</li><li>&lt;select name="linked_nodegroups" id="alreadlist" size="15" multiple class="search_locate"&gt;&lt;/select&gt;</li><li><br></li><li>&lt;input type="submit" class="white" value="保存关联" onclick="checkhello()"/&gt;</li><li><br></li><li>为什么还要加onclick呢?》</li><li><br></li><li>因为select需要事先将其选择。要不然就为空了!</li><li><br></li><li>所以<li>function checkhello()</li><li>{</li><li><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" color="#0000CC">        </font></span>var objs=document.getElementById("alreadlist").options;</li><li><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" color="#0000CC">        </font></span>for (i=0; i&lt; objs.length; i++)</li><li><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" color="#0000CC">        </font></span>{</li><li><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" color="#0000CC">                </font></span>objs.selected=true;</li><li><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" color="#0000CC">        </font></span>}</li><li><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" color="#0000CC">        </font></span>return true;</li><li>}<br>定义一下这个方法!</li><li><br></li><li>OK。这样就可以通过JQuery.form提交表单数据了。</li><li>而且可以提交select的数据哦!</li></li></span></li></ol></div></div>
页: [1]
查看完整版本: JQuery 实现表单提交