js ajax异步提交,jquery ajax异步提交表单数据的方法

jquery ajax异步提交表单数据的方法

使用jquery的ajax方法可以异步提交表单，成功后后台返回json数据，回调函数处理，可以不用刷新页面，达到异步的目的；

处理表单的数据可以用serialize()方法进行序列化，而如果提交的数据包括文件流的话，就需要使用 FormData对象：

不带文件的表单数据使用：var data = $(form).serialize();

带文件的表单数据使用：   var  data = new FormData($(form)[0]);

一、不带文件的ajax提交数据：

html：form表单

确认

jquery 异步处理

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

}

})

})

二、带文件的ajax提交数据：

html：form表单

有文件上传的form表单需要在

确认

jquery 异步处理

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

}

})

})

上面是用

本站文章为3672js教程网友分享投稿，版权归原作者，欢迎任何形式的转载，但请务必注明出处。同时文章内容如有侵犯了您的权益，请联系我们处理。

相关内容

暂无相关文章