標籤：預設 代碼 3.1 單元素 對象 傳遞 oct doctype 比較
ajaxForm()方法和submitForm()方法都能接受0個或1個參數。當為單個參數時，該參數可以是一個回呼函數，也可以是一個options對象，傳遞option對象，使它們擁有更多控制權；
(1)首先定義一個對象options，然後在裡面設定參數，代碼如下：
var options={
target: ‘#output1‘, //把伺服器返回的內容放入id為output1的元素中
beforeSubmit: showRequest, //提交前的回呼函數
success: showResponse , //提交成功的回呼函數
url: url, //預設form的"action"，如果申明，會覆蓋
type:type, //預設是form的method(‘get‘or‘post‘),如果申明，會覆蓋
dataType: null, //‘xml‘,‘script‘,‘json‘(接收伺服器返回的類型)
clearForm: true, //成功提交後，清除所有表單元素的值
resetForm: true, //成功提交後，重設所有表單元素的值
timeout:3000 //要求節流的時間，當大於三分鐘，跳出請求
};
(2)定義完options對象之後，就把這個參數傳給ajaForm()方法，代碼如下：
$("#myform").ajaxForm(options);
或者，
$("#myform").submit(function(){
$(this).ajaxSubmit(options);
return false;
})
(3)beforeSubmit——提交前的回呼函數
參數：formData為數組對象。在這裡，使用$.param()方法把它轉化為字串，得到如下格式：name=lida&address=guanzhou
jqFrom是個JQuery對象，它封裝表單元素
options就是options對象
function(formData,jqFrom,options){
var queryString=$.param(formData);
return false;
}
(4)success——提交後的回呼函數
function showResponse(responseText,statusText,xhr,$form){
//responseText,statusTex比較常用；
//當dataType屬性被設為xml時，把responseText改成responseXML;
}
案例
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>核心方法--ajaxForm()和ajaxSubmit()</title>
</head>
<body>
<form id="myForm" action="ajax.php" method="post">
名稱: <input type="text" name="username"/></br>
地址: <input type="text" name="address"/></br>
自我介紹: <textarea name="comment"></textarea></br>
<input type="submit" value="提交" id="test" /></br>
<div id="output1"></div>
</form>
<script type="text/javascript" src="../scripts/jquery-1.3.1.js"></script>
<script type="text/javascript" src="../scripts/lib/jquery.form.js"></script>
<script type="text/javascript">
$(function(){
var options={
beforeSubmit: showRequest, //提交前的回呼函數
success: showResponse , //提交成功的回呼函數
dataType: null, //‘xml‘,‘script‘,‘json‘(接收伺服器返回的類型)
timeout:3000 //要求節流的時間，當大於三分鐘，跳出請求
};
//提交前的回呼函數
function showRequest(formData,jqForm,options){
/*在這裡需要對錶單進行驗證，如果不符合規則，
則返回false來阻止表單提交，直到符合規則為止
*/
var queryString=$.param(formData);
return true;
}
// 提交成功的回呼函數
function showResponse(responseText,statusText,xhr,$form){
alert("狀態："+statusText);
$("#output1").append(responseText);
}
//方法1：
// $("#myForm").ajaxForm(options);
//方法2：
$(‘#myForm‘).submit(function() {
$(this).ajaxSubmit(options);
return false; //禁止表單預設提交
});
})
</script>
</body>
</html>
ajaxForm()方法和submitForm()方法的參數
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
