傳統的表單提交，都是頁面跳轉的形式，但是現在更流行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" ></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" ></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" ></div>
</form>
</body>
</html>
可以看出，在beforeSubmit的回調函數fun1中，我們有三種方式獲取表單數據 formData，jqForm，fieldValue 滿足了各種獲取值的方式，想怎么驗證怎么驗證。只要返回false就能阻止表單提交sucess回調的fun2也有狀態值和服務端的返回數據，想怎么處理怎么處理。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
