Example analysis of jquery ajax method of asynchronously submitting form data-JS Tutorial-php.cn

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

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

html: form form

Form forms with file uploads need to add enctype="multipart" to the

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 using theform To build the FormData object, if there is nothe form processing method is as follows:

html: No form form

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])获取上传的文件，如果需上传多个文件，要在标签加上属性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

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!