通过formData数据发送ajax请求

最新推荐文章于 2024-04-28 04:00:44 发布

原创最新推荐文章于 2024-04-28 04:00:44 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#什么是formData #ajax发送请求时的数据格式有哪些 #通过formData数据发送ajax请求 #formData #ajax发送请求

javaScript 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了如何使用原生JS及jQuery的FormData对象发送Ajax请求，包括创建FormData对象、添加数据、设置请求方式及处理响应的过程。适用于需要上传表单数据的场景。

formData

1.创建一个formData对象
var fd = new FormData(‘form表单’);
(创建formdtata对象的小括号里面，就是需要一个form表单dom对象)。
2.往fd对象中添加对象
fd.append(‘sex’,‘男’);
3.formData里面就会有form表单中有name属性的这些标签的取值。//键值对形式
console.log(fd.get(‘name属性值’));

原生js通过formData数据发送ajax请求

//1.创建一个FormData对象
var fd = new FormData(document.querySelector('form'));
 //注意:创建formData对象的那个form表单,获取值的标签的name属性一定要和接口的参数一致,因为这个用于name属性的标签的值就是我们要传给接口的值.
 //2.发送ajax请求
var xhr = new XMLHttpRequest();
 xhr.open('post',url);
 //注意: 利用FormData对象作为数据参数发送ajax请求,是不需要设置请求头的
xhr.onload = function(){
console.log(xhr.response);
 }
xhr.send(fd); //fd对象在这里传递

jquery通过formData数据发送ajax请求

//1.创建一个formData对象
 var fd = new FormData($('form')[0]); //创建FormData对象的时候,小括号里面一定要给的是dom对象. 
 //2.发送ajax请求
 $.ajax({
type:'post',
url:url,
 //意思就是传递的参数就是fd对象. 
 data:fd,
//如果报了这样一个错: Illegal invocation
//写下面这两句话就可以解决. 
contentType:false,//不要设置请求头
processData:false,//不要把我们传递的参数转成 key=value这种格式
success:function(backData){
console.log(backData);
 }
 });

以上就是通过formData发送数据的介绍，详情可参考MDN
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/FormData
详情可参考MDN