Asynchronous form data submission using jquery ajax

Asynchronous form data submission using jquery ajax

The ajax method of jquery can be used to submit forms asynchronously. After successful submission, json data is returned in the background and the callback function is used for processing. You do not need to refresh the page for asynchronous purposes;

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

Use var data =$ (form). serialize ();

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

I. ajax data submission without files:

Html: form

<Form id = "addForm" action = "$ {pageContext. request. contextPath}/admin/saveAdd "method =" post "> <input type =" text "name =" name "placeholder =" enter a name "/> <input type =" password "name =" password "placeholder =" password "/> </form> <button type =" button "id =" submitAdd "> OK </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 ("request failed ")}})})

 

Ii. submit data with file ajax:

Html: form

To upload a form with a file, you must add the enctype = "multipart/form-data" attribute to the <form> tag:

<Form id = "addForm" action = "$ {pageContext. request. contextPath}/admin/saveAdd "method =" post "enctype =" multipart/form-data "> <input type =" text "name =" name "placeholder =" enter a name "/> <input type =" password "name =" password "placeholder =" password "/> <input type =" file "name =" avatar "/> </form> <button type = "button" id = "submitAdd"> OK </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, // you do not need to cache processData: false when uploading a file, // you need to set it to false. Because the data value is a FormData object, you do not need to process the data contentType: false, // you need to set it to false. Because it is a FormData object and the attribute enctype = "multipart/form-data" data: data, dataType: 'json', success: function (data) has been declared) {alert ('success') ;}, error: function () {alert ("request failed ")}})})

The preceding figure uses the <form> form to construct the FormData object. If no <form> form is processed as follows:

Html: no form

<Div id = "uploadFile"> <input id = "file" name = "avatar" type = "file"/> <button id = "upload" data-url = "/ admin/upload "type =" button "> upload Avatar </button> </div>

Jquery asynchronous processing:

$ ("# Upload "). click (function () {var targetUrl = $ (this ). attr ("data-url"); var data = new FormData (); // Add the parameter data to the FormData object. append ('file', $ ('# file') [0]. files [0]); // 'file' is the parameter name, $ ('# file') [0]. files [0]) to obtain the uploaded file. to upload multiple files, add the attribute multiple $ to the <input> label. ajax ({type: 'post', url: targetUrl, cache: false, processData: false, contentType: false, data: data, dataType: 'json', success: function (data) {alert ('success') ;}, error: function () {alert ("request failed ")}})})