jquery+ajax implements asynchronous submission of form data-JS Tutorial-php.cn

jquery+ajax implements asynchronous submission of form data

php中世界最好的语言

Release： 2018-04-19 14:17:37

Original

2075 people have browsed it

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>

Copy after login

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

Copy after login

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>

Copy after login

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

Copy after login

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>

Copy after login

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

Copy after login

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!