使用Ajax请求成功时,后端返回文件流,正常导出文件; 请求失败时,后端返回json对象,如:{"Status":"false","StatusCode":"500","Result":"操作失败"},
时间: 2023-07-02 09:23:10 浏览: 230
好的,你的问题是如何使用 Ajax 处理后端返回文件流和 json 对象。在 Ajax 中,我们可以使用 XMLHttpRequest 或者 jQuery 的 Ajax 方法来发送请求和接收响应。当后端返回文件流时,我们需要使用 Blob 或者 ArrayBuffer 对其进行处理,具体如下:
```javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/download');
xhr.responseType = 'blob';
xhr.onload = function () {
if (xhr.status === 200) {
// 根据 Content-Type 处理文件流
const contentType = xhr.getResponseHeader('Content-Type');
if (contentType.includes('application/pdf')) {
const blob = xhr.response;
const url = URL.createObjectURL(blob);
// 创建 a 标签并模拟点击下载
const link = document.createElement('a');
link.href = url;
link.download = 'file.pdf';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
} else if (contentType.includes('image/jpeg')) {
// 处理图片数据
} else {
console.error('不支持的文件类型');
}
} else {
console.error('请求失败');
}
};
xhr.send();
```
当后端返回 json 对象时,我们可以使用 JSON.parse() 方法将其转换为 JavaScript 对象,然后根据对象中的状态码和状态信息进行处理,具体如下:
```javascript
$.ajax({
url: '/api/submit',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
name: '张三',
age: 18
}),
success: function (data) {
if (data.Status === 'true') {
// 操作成功
console.log(data.Result);
} else {
// 操作失败
console.error(data.StatusCode, data.Result);
}
},
error: function (xhr, textStatus, errorThrown) {
console.error(errorThrown);
}
});
```
以上代码示例中,我们使用 XMLHttpRequest 或 jQuery 的 Ajax 方法发送请求,并在 onload 或 success 回调函数中处理响应数据。对于文件流,我们需要根据 Content-Type 处理返回的数据,并使用 URL.createObjectURL() 方法将数据转换为 URL,然后创建一个 a 标签并模拟点击下载。对于 json 对象,我们使用 JSON.parse() 方法将其转换为 JavaScript 对象,并根据对象中的状态码和状态信息进行处理。
阅读全文