How to submit form data asynchronously using jquery's ajax

What I bring to you this time is how to use jquery's ajax to submit form data asynchronously. You can use jquery's ajax method to submit the form asynchronously. After success, the background returns json data, Callback function Processing, you can achieve asynchronous purposes without refreshing the page. This article will give you a good analysis.

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:

Without Use the form data of the file: var data = $(form).serialize();

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>

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

I believe you have mastered the method after reading the above introduction. For more exciting information, please pay attention to php Chinese website Other related articles !

Related reading:

Use jQuery to deduplicate and sort arrays

How can it be done with JS Click to jump to the logged-in personal email

There are several ways to implement chain operations in PHP

The above is the detailed content of How to submit form data asynchronously using jquery's ajax. For more information, please follow other related articles on the PHP Chinese website!