通过formData数据发送ajax请求

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

你可能感兴趣的:(前端集合,什么是formData,formData,ajax发送请求)