ajax异步提交表单的使用

1. 不带文件的ajax提交数据：
2. html：form表单

3. <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 异步处理

4. $("#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("请求失败")
       }
      })
       
   })
    

   带文件的ajax提交数据：

5.  有文件上传的form表单需要在<form>标签里加入 enctype="multipart/form-data"属性 :

6. <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 异步处理

7. $("#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("请求失败")
        }
       })
        
    })
   

   html：没有form表单

8. <div id="uploadFile">
    <input id="file" name="avatar" type="file"/>
    <button id="upload" data-url="/admin/upload" type="button">上传头像</button>
   </div>

   jquery异步处理：

9. $("#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("请求失败")
        }
       })
        
    })