ajaxForm()方法和submitForm()方法的參數


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>

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM