snipaste_20191231_095937.png
大家可以看到在jquery教程中有单独写了ajax请求的那一块,那我们用jquery该怎么做呢?
1.jQuery使用ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="get方法" class="get" />
<input type="button" value="post方法" class="post" />
<input type="button" value="ajax方法" class="ajax" />
</body>
</html>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
//用jquery实现get请求
$('.get').click(function(){
$.get('接口','key=value',function(backData){
//json数据
//console.log(backData);
//转成js对象
console.log(JSON.parse(backData))
})
})
//用jquery实现post请求
$('.post').click(function(){
$.post('接口',{key='value',info='sb'}),
function(backData){
console.log(backData);
}
})
//用ajax方法,常用,gei与post请求的封装
$('.ajax').click(function(){
$.ajax({
url:'接口',
type:'请求',
dataType:'数据格式',
data:{key:value},
success:function(backData){
console.log(backData)
// console.log(JSON.parse(backData))
}
})
})
})
</script>
2.FormData对象
FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台,在使用ajax提交时,使用FormData对象可以减少拼接queryString的工作量(queryString是查询字符串,http查询字符串由url中?后面的值指定)
1.构造函数
1.创建一个空对象实例
var formData=new FormData();
console.log(formData);
snipaste_20191231_105509.png
此时我们可以用append()方法添加数据
2.使用一个form表单来初始化主管对象实例
<form id="myForm" action="" method="post">
<input type="text" name="name">名字
<input type="password" name="psw">密码
<input type="submit" value="提交">
</form>
snipaste_20191231_110022.png
我们可以使用这个表单元素作为初始化参数，来实例化一个formData对象
<script>
var formData=new FormData();
console.log(formData);
//获取页面上的form表单
var form=document.querySelector('#myForm');
//用表单来初始化
var formData=new FormData(form);
//我们可以根据name来访问表单中的字段
var name=formData.get('name');//获取名字
var psw=formData.get('psw');//获取密码
//当然也可以在这个基础上,添加其他数据
formData.append('token','fakknfanfnkanmf');
</script>
获取单个值可以使用formData对象.get();
而直接打印是看不到的。因为外界访问不到，你使用append方法后，对应的键值对就已经添加到表单里面了，你在控制台看到的是FormData原型，存储的数据没有以对象属性的方式体现
for (var value of formData.values()) {
console.log(value);
}
3.操作方法
我们要明确formData里面存放存储的数据形式,一对key/value组成一条数据,key是唯一的,一个key可能对应多个value,如果是使用表单初始化,每一个表单字段对应一条数据,它们的HTML name属性即为key值,它们value属性对应value值
k1=[v1,v2,v3]
k2,v4
3.1 获取值
我们可以通过get(key)/getAll(key)来获取对应的value
formData.get('name');//获取key为name的第一个值
formData.getAll('name')//返回一个伪数组,获取key为name的所有值
3.2 添加数据
我们可以通过append(key,value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v1"]
3.3 设置修改数据
我们可以通过set(key,value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值
formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]
3.4判断是否有该数据
我们可以通过has(key)来判断是否对应的key值
formData.append("k1", "v1");
formData.append("k2",null);
formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false
3.5 删除数据
通过delete(key),来删除数据
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");
formData.getAll("k1"); // []
3.6 遍历
通过entries()来获取一个迭代器,然后遍历所有的数据
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");
var i = formData.entries();
i.next(); // {done:false, value:["k1", "v1"]}
i.next(); // {done:fase, value:["k1", "v2"]}
i.next(); // {done:fase, value:["k2", "v1"]}
i.next(); // {done:true, value:undefined}
可以看到返回迭代器的规则
1:每调用一次next()返回一条数据，数据的顺序由添加的顺序决定
2:返回的是一个对象，当其done属性为true时，说明已经遍历完所有的数据，这个也可以作为判断的依据
3:返回的对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回
3.7 发送数据
通过xhr发送数据
var xhr = new XMLHttpRequest();
xhr.open("post","login");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formData);
实现文件异步上传
网友评论