jquery ajax異步提交表單數據

 

使用jquery的ajax方法能夠異步提交表單，成功後後臺返回json數據，回調函數處理，能夠不用刷新頁面，達到異步的目的；

處理表單的數據能夠用serialize()方法進行序列化，而若是提交的數據包括文件流的話，就須要使用 FormData對象：

不帶文件的表單數據使用：var data = $(form).serialize();

帶文件的表單數據使用：   var  data = new FormData($(form)[0]);

 

1、不上傳文件的ajax提交數據：

一、用serialize()方法序列化form表單提交參數 ：

html：form表單

 
 <form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post">             
     <input type="text"   name="name" placeholder="請輸入名字" />
     <input type="password"  name="password" placeholder="密碼"/>
 </form>
<button type="button" id="submitAdd">確認</button>

  jquery 異步處理

  $("#submitAdd").click(function(){
             
          var targetUrl = $("#addForm").attr("action");             
          var data  = $("#addForm").serialize();                   
             $.ajax({    
                    type:'post',        
                    url:targetUrl,  
                    cache: false,
                    data:data,        
                    dataType:'json',    
                    success:function(data){                        
                          alert('success');
                    },
                    error:function(){ 
                        alert("請求失敗")
                 }
             })
              
   })

 

二、用data{}格式的方法提交data參數：

 html,form表單：

<form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post">             
     <input type="text" id="name"  name="name" placeholder="請輸入名字" />
     <input type="password" id="password"  name="password" placeholder="密碼"/>
 </form>
<button type="button" id="submitAdd">確認</button>

Jquery 異步處理：

$("#submitAdd").click(function(){
             
          var targetUrl = $("#addForm").attr("action");  
          var userName =$("#name").val();
          var pd= $("#passwrod").val();
          //建立數組           
          var array  = new Array();  
          //往數組添加數據
          array.push('hello');    
          array.push('world');             
             $.ajax({    
                    type:'post',        
                    url:targetUrl,  
                    cache: false,
                    data:{"name":userName,"password":pd,"array[]":array},    //注意，傳遞數組參數時，參數名須要加上[],如 "array[]"，不然後臺獲取不了    
                    dataType:'json',    
                    success:function(data){                        
                          alert('success');
                    },
                    error:function(){ 
                        alert("請求失敗")
                 }
             })
              
   })

 

 

 

 

2、上傳文件的ajax提交數據：

一、用<form>表單來構建FormData對象：

 html：form表單

 注意：有文件上傳的form表單須要在<form>標籤里加入 enctype="multipart/form-data"屬性 :

<form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post"enctype="  multipart/form-data">             
     <input type="text"   name="name" placeholder="請輸入名字" />
     <input type="password"  name="password" placeholder="密碼"/>
     <input type="file" name="avatar" />
 </form>
<button type="button" id="submitAdd">確認</button>

 

jquery 異步處理

$("#submitAdd").click(function(){
             
          var targetUrl = $("#addForm").attr("action");             
          var data = new FormData($( "#addForm" )[0]);                   
             $.ajax({    
                    type:'post',        
                    url:targetUrl,  
                    cache: false,              //上傳文件不需緩存
                    processData: false,    //需設置爲false。由於data值是FormData對象，不須要對數據作處理
                    contentType: false,    //需設置爲false。由於是FormData對象，且已經聲明瞭屬性enctype="multipart/form-data"
                    data:data,        
                    dataType:'json',    
                    success:function(data){                        
                          alert('success');
                    },
                    error:function(){ 
                        alert("請求失敗")
                   }
             })
              
   })

二、若是不用<form>表單構建FormData對象的處理方法以下：

html：沒有form表單

<div id="uploadFile">
    <input id="file" name="avatar" type="file"/>
    <button id="upload" data-url="/admin/upload" type="button">上傳頭像</button>
</div>

jquery異步處理：

$("#upload").click(function(){
              
          var targetUrl = $(this).attr("data-url");             
          var data = new FormData();
          //FormData對象加入參數
          data.append('file', $('#file')[0].files[0]);   //'file' 爲參數名，$('#file')[0].files[0])獲取上傳的文件，若是需上傳多個文件，要在<input>標籤加上屬性multiple               
             $.ajax({    
                    type:'post',        
                    url:targetUrl,  
                    cache: false,              
                    processData: false,   
                    contentType: false,    
                    data:data,        
                    dataType:'json',    
                    success:function(data){                        
                          alert('success');
                    },
                    error:function(){ 
                        alert("請求失敗")
                   }
             })
              
   })

 

補充說明：

注意：須要調用函數返回值時，須要爲ajax設置 async : false，不然ajax返回值將異步，致使函數返回不到ajax裏面的返回值；

具體以下：

 //校驗驗證碼
              function  validateCode(){            
                  var result ;
                  var validateCode = $("#validateCode").val();
                  var validateCodeUrl =$("#validateCode").attr("data-validate");
                  $.ajax({
                      type:'get',
                      url :validateCodeUrl,
                      data:{'validateCode':validateCode},
                      dataType:'json',
                      async : false,
                      success:function(flag){
                          if(flag.valid==true){
                              $("#validateCode").removeClass("warn-border");
                              $("#small-warn").remove();
                              result =true;
                              return result ;
                          }                                                   
                          var tag ='<small id="small-warn" class="small-warn"><i class="fa fa-close"></i>請輸入正確的驗證碼</small>'
                          $("#validateCode").addClass("warn-border");
                          $(".validate-img-code").after(tag);
                          result =false;
                          return result ;
                      },
                      error:function(){
                          alert("請求失敗！")
                      }
                  })
                  return result ;
              }