• 依賴的腳本文件

1 <script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript"></script> 2 <script src="../Javascript/jquery.form.js" type="text/javascript"></script>

• ajaxSubmit 和ajaxForm區別

ajaxForm?

ajaxForm()不能提交表單。在document的ready函數中，使用ajaxForm來為AJAX提交表單進行準備。提交動作必須由submit開始?

ajaxForm()適用于以表單提交方式處理ajax技術（需要提供表單的action、id、 method，最好在表單中提供submit按鈕）它大大簡化了使用ajax技術提交表單時的數據傳遞問題，使用ajaxForm()你不需要逐個的以 JavaScript的方式獲取每個表單屬性的值，并且也不需要在請求路徑后面通過url重寫的方式傳遞數據。ajaxForm()會自動收集當前表單中每個屬性的值，然后將其以表單提交的方式提交到目標url。這種方式提交數據較安全，并且使用起來更簡單，不必寫過多冗余的JavaScript代碼

ajaxSubmit?
ajaxSubmit()馬上由AJAX來提交表單。你可以在任何情況下進行該項提交。?

ajaxSubmit()適用于以事件的機制以ajax提交form表單（超鏈接、圖片的click事件），該方法作用與ajaxForm()類似，但它更為靈活，因為他依賴于事件機制，只要有事件存在就能使用該方法。你只需指定該form的action屬性即可，不需要提供submit按鈕。

• 示例代碼

1 <!--HTML-->2 <form id="form1" name="form1">3 <input id="userName" name="userName" value="姓名" />4 <input id="age" name="age" value="30" />5 <input type="submit" value="submit" />6 </form>7 <input id="myButton" type="button" value="提交" />8 <!--javascript-->9 <script type="text/javascript"> 10 11 var myData = { 12 "CnName": "周佳良", 13 "EnName":"zhoujl" 14 }; 15 $(function () { 16 var ajaxFormOption = { 17 type: "post", //提交方式 18 dataType: "json", //數據類型 19 data: myData,//自定義數據參數，視情況添加 20 url: "TestHandler.ashx?type=ajaxForm", //請求url 21 success: function (data) { //提交成功的回調函數 22 document.write("success"); 23 } 24 }; 25 26 //form中有submit按鈕——方式1 27 $("#form1").ajaxForm(ajaxFormOption); 28 29 //form中有submit按鈕——方式2 30 $("#form1").submit(function () { 31 $(this).ajaxSubmit(ajaxFormOption); 32 return false; 33 }); 34 35 //不需要submit按鈕，可以是任何元素的click事件 36 $("#myButton").click(function () { 37 $("#form1").ajaxSubmit(ajaxFormOption); 38 return false; 39 }); 40 41 }); 42 </script>

深度閱讀：

API英文原文：http://www.malsup.com/jquery/form/#api

http://www.cnblogs.com/sydeveloper/archive/2014/05/27/3754637.html

http://www.cnblogs.com/luluping/archive/2009/04/15/1436177.html

總結

以上是生活随笔為你收集整理的jquery.form.js的ajaxSubmit和ajaxForm使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。