jquery+ajax implements asynchronous submission of form data

This time I will bring you jquery Ajax implements asynchronous submission of form data, jquery ajax implements asynchronous submission of form data. What are the precautions ? The following is a practical case. Let’s take a look.

Use jquery's ajax method to submit the form asynchronously. After success, the json data will be returned in the background, Callback functionprocessing, you can achieve asynchronous purposes without refreshing the page;

The data processed in the form can be serialized using the serialize() method. If the submitted data includes a file stream, you need to use the FormData object:

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

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

1. Ajax submission data without files:

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 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 data with files:

html：form form

For forms with file upload, you need to add the enctype="multipart/form-data" attribute to the

tag:

<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 to use the form to construct the FormData object. If there is no form, the processing method is as follows:

html: No 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('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("请求失败")
     }
    })
    
 })

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Use jQuery to implement front-end search

jquery selects the value in the drop-down box to count to the text box

jQuery zTree repeatedly adds child nodes during the asynchronous process

How jQuery dynamically controls page elements

The above is the detailed content of jquery+ajax implements asynchronous submission of form data. For more information, please follow other related articles on the PHP Chinese website!