Example analysis of jquery ajax method of asynchronously submitting form data

This article mainly introduces the method of asynchronously submitting form data in jquery ajax for everyone. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Use the ajax method of jquery to submit the form asynchronously. After success, the json data is returned in the background and processed by the callback function. You do not need to refresh the page to achieve asynchronous purposes;

You can use serialize to process the form data. () method for serialization, and if the submitted data includes a file stream, you need to use the FormData object:

Use form data without a file: var data = $(form).serialize();

Use form data with files: var data = new FormData($(form)[0]);

1. Ajax submission data without files:

html：form 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 asynchronous processing

##

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

2. Ajax submission of data with files:

html: form form

Form forms with file uploads need to add enctype="multipart" to the ff9c23ada1bcecdd1a0fb5d5a0f18437 tag /form-data" attribute:

<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 asynchronous processing

##

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

The above is using the ff9c23ada1bcecdd1a0fb5d5a0f18437 form To build the FormData object, if there is no ff9c23ada1bcecdd1a0fb5d5a0f18437 the form processing method is as follows:

html: No form form

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

jquery asynchronous processing:

$("#upload").click(function(){
    
   var targetUrl = $(this).attr("data-url");    
   var data = new FormData();
   //FormData对象加入参数
   data.append(&#39;file&#39;, $(&#39;#file&#39;)[0].files[0]); //&#39;file&#39; 为参数名，$(&#39;#file&#39;)[0].files[0])获取上传的文件，如果需上传多个文件，要在<input>标签加上属性multiple    
    $.ajax({ 
     type:&#39;post&#39;,  
     url:targetUrl, 
     cache: false,    
     processData: false, 
     contentType: false, 
     data:data,  
     dataType:&#39;json&#39;, 
     success:function(data){      
       alert(&#39;success&#39;);
     },
     error:function(){ 
      alert("请求失败")
     }
    })
    
 })

Related recommendations:

Example analysis of Ajax asynchronous request technology

Example explanation of Ajax asynchronous Request technology

Talk about the example usage of ajax asynchronous request

The above is the detailed content of Example analysis of jquery ajax method of asynchronously submitting form data. For more information, please follow other related articles on the PHP Chinese website!