首页>>表单>>Ajax表单提交插件jquery form(2013-12-22)

Ajax表单提交插件jquery form

 表单验证阻止提交表单

Ajax表单提交插件jquery form
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="main">  
  2.     
  3.    <div class="demo">  
  4.         <form id="my_form" action="submit.php" method="post">   
  5.             <p>姓名：<input type="text" name="uname" id="uname" class="input"></p>  
  6.             <p>性别：<input type="radio" name="sex" value="1" checked> 男 <input type="radio" name="sex" value="2"> 女 </p>  
  7.             <p>年龄：<input type="text" name="age" id="age" class="input" style="width:50px"></p>  
  8.             <p style="margin-left:30px"><input type="submit" class="btn" value="提交"><span id="msg"></span></p>  
  9.         </form>  
  10.         <div id="output"></div>  
  11.    </div>  
  12.      
  13. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(function(){  
  3.     var options = {   
  4.        // target:        '#output',   // target element(s) to be updated with server response   
  5.         beforeSubmit:  showRequest,  // pre-submit callback   
  6.         success:       showResponse,  // post-submit callback  
  7.         resetForm: true,   
  8.         dataType:  'json'   
  9.    
  10.         // other available options:   
  11.         //url:       url         // override for form's 'action' attribute   
  12.         //type:      type        // 'get' or 'post', override for form's 'method' attribute   
  13.         //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)   
  14.         //clearForm: true        // clear all form fields after successful submit   
  15.         //resetForm: true        // reset the form after successful submit   
  16.    
  17.         // $.ajax options can be used here too, for example:   
  18.         //timeout:   3000   
  19.     };   
  20.    
  21.     // bind to the form's submit event   
  22.     $('#my_form').submit(function() {  
  23.         // inside event callbacks 'this' is the DOM element so we first  
  24.         // wrap it in a jQuery object and then invoke ajaxSubmit  
  25.         $(this).ajaxSubmit(options);  
  26.   
  27.         // !!! Important !!!  
  28.         // always return false to prevent standard browser submit and page navigation  
  29.         return false;  
  30.     });  
  31. }); 
  32. // pre-submit callback  
  33. function showRequest(formData, jqForm, options) {  
  34.     var uname = $("#uname").val(); 
  35.     if(uname==""){ 
  36.         $("#msg").html("姓名不能为空！"); 
  37.         return false; 
  38.     } 
  39.      
  40.     var age = $("#age").val(); 
  41.     if(age==""){ 
  42.         $("#msg").html("年龄不能为空！"); 
  43.         return false; 
  44.     } 
  45.     $("#msg").html("正在提交..."); 
  46.      
  47.      
  48.     return true;  
  49. }  
  50.   
  51. // post-submit callback  
  52. function showResponse(responseText, statusText)  {  
  53.     $("#msg").html('提交成功'); 
  54.     var sex = responseText.sex==1?"男":"女"; 
  55.     $("#output").html("姓名："+responseText.uname+" 性别："+sex+" 年龄："+responseText.age); 
  56.     // for normal html responses, the first argument to the success callback  
  57.     // is the XMLHttpRequest object's responseText property   
  58.    
  59.     // if the ajaxSubmit method was passed an Options Object with the dataType   
  60.     // property set to 'xml' then the first argument to the success callback   
  61.     // is the XMLHttpRequest object's responseXML property   
  62.    
  63.     // if the ajaxSubmit method was passed an Options Object with the dataType   
  64.     // property set to 'json' then the first argument to the success callback   
  65.     // is the json data object returned by the server   
  66.    
  67.     //alert('status: ' + statusText + 'nnresponseText: n' + responseText +   
  68.     //    'nnThe output div should have already been updated with the responseText.');   
  69. }   
  70. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_201.html