发布于 

xhr与FormData对象的使用

xhr的timeout和ontimeout和onload:

timeout和ontimeout:

注①:-send()方法用于发送http请求,如果是异步请求(默认)则此方法会在请求后立即返回;如果是同步请求,则此方法直到响应到达后才会返回

-语法:XMLHttpRequest.send() 【xhr.send()】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 发送一个get请求
var xhr =new XMLHttpRequest();
xhr.open('get','接口');
设置请求超时时间(毫秒单位)
-如果超过指定时间,请求会被取消,后续的操作不执行
xhr.timeout = 30000;
xhr.ontimeout = function () {
alert('超时了')
};


xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 & xhr.status === 200) {
console.log(xhr.responseText);
}
};

onload:

1
2
3
4
5
6
7
8
9
10
11
12
发送请求
var xhr = new XMLHttpRequest();
xhr.open('get','接口');
xhr.send();
响应处理:
- xhr中提供了onload事件,直接用于表示xhr.readyState4的情况,用于简化响应处理操作
- 但是还是需要进行xhr.status的判断处理
xhr.onload = function () {
if (xhr.status === 200){
console.log(xhr.responseText);
}
};

FormData对象的使用

使用FormData模拟表单进行自定义数据上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1创建一个空的FormData对象
var fd = new FormData();

2给fd添加数据,使用fd的append()
fd.append('name','jack');
fd.append('age',18);

注:无法直接输出fd查看数据,需要使用get方法操作
Eg
consol.log(fd.get('name'));

3通过ajax发送给对应接口
-注:FormData数据必须使用post请求方式发送

var xhr = new XMLHttpRequest();
xhr.open('post','端口');
-直接将FormData对象放入到send()参数中即可,也不需要设置requestHeader
xhr.send(fd);

使用FormData对表单数据进行处理:

html结构:

1
2
3
4
5
6
7
8
9
10
11
12
<form id="myForm">
用户名: <input type="text" name="username">
<br>
密码: <input type="password" name="psw">
<br>
性别: <input type="password" name="gender">
<br>
学校: <input type="password" name="school">
<br>
<!-- 为了不产生表单提交效果,将按钮修改为普通按钮即可 -->
<button id="btn" type="button">提交</button>
</form>

js部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var myForm = document.qureySelector("#myForm");
1进行按钮操作
document.getElementById('btn').onclick = function () {
2通过FormData对象获取表单所有数据
-给FormData传入参数,参数为form标签/DON对象
var fd = new FormData(mtForm);
注①
希望在表单元素的基础上,再格外上传一些数据,也可以使用append()
fd.append('girlFriend','rose');
-delete()删除某天数据
fd.delete('***')

3通过ajax发送
var xhr = new XMLHttpRequest();
xhr.open('post', '接口');
xhr.send(fd);

}

文件的上传1:【有form】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<form id="myForm">
<input type="text" name="username">
<input type="password" name="pws">
<textarea name="txt"></textarea>

<!-- 文件域:用于进行文件选取 -->
<input type="file" name="avatar">

<button type="button" id="btn">按钮</button>
</form>
<!-- 这个img用于显示上传后的线上图片 -->
<img src="" alt="" id="pic">

<script>
// 1 按钮点击事件
var btn = document.getElementById('btn');
var myForm = document.getElementById('myForm');
var pic = document.getElementById('pic');


btn.onclick = function () {
// 2 使用fd管理表单数据
var fd = new FormData(myForm);

// 3 将表单提交给服务器(包含了要上传的文件)
var xhr = new XMLHttpRequest();
xhr.open('post', '接口');
xhr.send(fd);

// 响应内容中具有上传的图片文件的线上地址,可以进行访问
xhr.onload = function () {
if (xhr.status === 200) {
var res = JSON.parse(xhr.responseText);
pic.src = '接口' + res.url;
}
}
};
</script>

文件上传2:【无form】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!-- 如果要上传的是一个单独的表单域,没有form结构,需要进行单独处理 -->
<input type="file" id="ipt">
<!-- 由于没有form,button就不存在提交的问题 -->
<button id="btn">提交</button>

<img src="" alt="" id="pic">

<script>
var btn = document.getElementById('btn');
var ipt = document.getElementById('ipt');
var pic = document.getElementById('pic');

// 1 设置点击按钮事件
btn.onclick = function () {
// 2 创建FormData对象
var fd = new FormData();
// 3 根据需求将数据添加到fd中
// - 如何进行文件添加
// - 1 找到文件域中选择的文件
// - ipt.files[0] 代表了要上传的文件
// - ipt.files.length 代表选择文件的个数,如果为0说明没选文件
// - 2 使用append将文件添加到fd中即可
fd.append('fileUpload', ipt.files[0]);

// 4 发送请求
var xhr = new XMLHttpRequest();
xhr.open('post', '接口');
xhr.send(fd);

// 5 接收响应,可以将线上图片地址进行展示
xhr.onload = function () {
if (xhr.status === 200) {
pic.src = '接口' + JSON.parse(xhr.responseText).url;
}
}
};

JQuery发送FormData的方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!-- 如果要上传的是一个单独的表单域,没有form结构,需要进行单独处理 -->
<input type="file" id="ipt">
<!-- 操作按钮 -->
<button id="btn">提交</button>
<!-- 用于展示线上的图片地址 -->
<img src="" alt="" id="pic">


<script src="./lib/jquery.js"></script>
<script>
// 1 设置按钮的点击事件
$('#btn').on('click', function () {
// 2 获取文件域的文件信息
var files = $('#ipt')[0].files;
console.log(files);

// 3 检测是否上传了文件
if (files.length === 0) {
return;
}
// 4 创建FormData对象
var fd = new FormData();
fd.append('uploads', files[0]);

// 5 通过jQuery的ajax发送这个FormData
$.ajax({
type: 'post',
url: '接口',
// 将fd直接设置给data
data: fd,
// 如果要发送FormData,必须设置以下属性
contentType: false, // 无需jQuery设置请求参数的内容类型
processData: false, // 无需jQuery进行数据处理
success: function (res) {
if (res.status === 200) {
$('#pic').prop('src', '接口' + res.url)
}
}
});
});
</script>

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。