傳統的表單提交，都是頁面跳轉的形式，但是現在更流行ajax提交，那么如果希望有表單提交的簡便，也有ajax的效果，有什么解決辦法嗎？
怎么使用
兩種使用方式：
第一種方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery-form.js"></script> <script> // 使用ajaxForm $(function(){ $("#myForm").ajaxForm(function(){ $("#output1").html("提交成功").show(); }) }) </script> </head> <body> <form id="myForm"> <input type="text" name="username"> <input type="text" name="password"> <input type="submit" value="提交"> <div id="output1" style="display: none"></div> </form> </body> </html>第二種方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery-form.js"></script> <script> $(function(){ //方式二 與方式一效果一樣 $("#myForm").submit(function(){ // 使用ajaxSubmit $(this).ajaxSubmit(function(){ $("#output1").html("提交成功").show(); }); return false; }) }) </script> </head> <body> <form id="myForm"> <input type="text" name="username"> <input type="text" name="password"> <input type="submit" value="提交"> <div id="output1" style="display: none"></div> </form> </body> </html>感覺上第一種要 更方便一點。
其中的參數function()是提交成功后的回調函數。
利用這種提交方式，可以實現異步表單提交，很方便。但是，還是有點不滿足，比如說，我可能想在提交表單之前驗證一下，雖然可以手動地在提交表單動作之外完成，但是很麻煩。form插件有沒有繼承這樣的功能呢？
二、options參數
上面只講了form中的一個function回調函數參數，其實它還有一個參數，就是options。有什么用呢？
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery-form.js"></script> <script> var options = { target:'#output1', // 把服務器返回的內容放入id為output1的元素中 beforeSubmit: fun1, // 提交前的回調函數 success: fun2, // 提交后的回調函數 dataType: // 接收服務端返回的類型 xml,scrpit,json }; // beforeSubmit前可以作驗證 function fun1(formData,jqForm,options){ // formData 提交值的數組對象 // jqForm 表單元素的jQuery對象，jqForm[0]是其dom對象 // 該函數如果返回false，則阻止表單提交 // formData可以判斷全部不為空的情況 for(var i=0;i<formData.length;i++){ if(!formData[i].value){ alert("都不能為空"); return false; } } // jqForm可以判斷某個不為空的情況 var form = jqForm[0]; if(!form.name.value){ alert("name不能為空"); return false; } // fieldValue()可以獲取多值的數組形式，如checkbox var value = $('input[name=name]').fieldValue(); if(!value[0]){ return false; } } function fun2(responseText, statusText){ // 根據dataType不同responseText解析方式不同， // 默認 responseText // xml responseXml以xml解析 // json responseJson } $(function(){ //方式二 與方式一效果一樣 $("#myForm").ajaxForm(options); // 要想使options生效，需要作為參數傳遞 }) </script></head><body> <form id="myForm"> <input type="text" name="username"> <input type="text" name="password"> <input type="submit" value="提交"> <div id="output1" style="display: none"></div> </form></body></html>可以看出，在beforeSubmit的回調函數fun1中，我們有三種方式獲取表單數據 formData，jqForm，fieldValue 滿足了各種獲取值的方式，想怎么驗證怎么驗證。只要返回false就能阻止表單提交sucess回調的fun2也有狀態值和服務端的返回數據，想怎么處理怎么處理。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
