首页 > JQuery学习 > JQuery的Ajax提交表单

JQuery的Ajax提交表单

2008年7月22日
评论 发表评论

我是一个JS挫人，所以这篇也难免会有不对的地方，如有不对的地方，还请指出，THX
对于JQ的Ajax提交，JQ本身是没有办法的。不过还好我们有不计其数的插件～
我们首先下载form.js这个JQ的插件，然后我们就可以开工了

  1. // prepare the form when the DOM is ready
  2. $(document).ready(function() { 
  3.     var options = { 
  4.         target:        '#output1',   // target element(s) to be updated with server response
  5.         beforeSubmit:  showRequest,  // pre-submit callback
  6.         success:       showResponse  // post-submit callback
  7.     };
  8.  
  9.     $('#myForm2').submit(function() { 
  10.         $(this).ajaxSubmit(options);
  11. //永远都return false以避免浏览器标准的subimit和页面导航引起的错误
  12.         return false;
  13.     });
  14. });
  15.  
  16. // pre-submit callback
  17. function showRequest(formData, jqForm, options) { 
  18. //formData是一个Form元素的数组，jqForm是一个JQuery对象，要用它对form元素操作使用var element1 = jqForm[0]
  19.     var queryString = $.param(formData);
  20.     alert('About to submit: \n\n' + queryString);
  21.     //如果返回false的话，则可以阻止form提交，否则，允许提交   
  22.     return true;
  23. } 
  24.  
  25. // post-submit callback
  26. function showResponse(responseText, statusText)  { 
  27. //statusText为执行成功后的状态，responseText为我们提交Form之后返回的字符串，也就是action="abc.php"中提交之后abc.php返回的字符串
  28.     alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
  29.         '\n\nThe output div should have already been updated with the responseText.');
  30. }

稍微解释一下
options定义了我们在ajaxSubmit的参数，其中

  1. target:        '#output2',

给我们定义了ajax请求完成之后内容需要更改的div的id
而beforeSubmit和success则分别定义了ajax请求完成前和完成之后需要执行的回调操作。
下面定义的两个function就是对于回调操作的定义。
对于页面提交文件abc.php我们定义如下

  1. echo "Ajax Success";

对于HTML部分，简单

  1. <div id="output1">Hello,World</div>

我们页面被成功的Ajax条之后，这段代码就会变成我们预先设定的那样,也就是变成了

  1. <div id="output1">Ajax Success</div>

JQuery学习

  1. 目前还没有任何评论.
  1. 目前还没有任何 trackbacks 和 pingbacks.