jQuery Ajax-$.ajax()方法如何获取Response Headers

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

一、需求

由于项目需要，在做文件下载的功能时，要求从 Response Headers 的 Content-Disposition 中获取下载的文件名称（filename），可以通过 $.ajax() 的 complete() 来实现。

二、$.ajax() 的 complete()

类型：Function

请求完成后回调函数 (请求成功或失败之后均调用)。

参数： XMLHttpRequest 对象和一个描述请求类型的字符串。

这是一个 Ajax 事件。

三、具体实现

代码如下：

/* 下载 */
function download(name) {
    $.ajax({
        url: "下载的接口地址",
        method: "get", //请求方式
        beforeSend: function (request) { //发送请求前
            request.setRequestHeader("token", sessionStorage.getItem('token'));
        },
        data: { //需要发送的数据
            name: name,
            creator: sessionStorage.getItem('name')
        },
        success: function (result) {//请求成功时拿到数据
            successData = result
        },
        complete: function (xhr) { //请求完成后，获取fileName，处理数据
            // console.log(successData)
            
            //获取Response Headers 中的 Content-Disposition
            let ContentDisposition = xhr.getResponseHeader('Content-Disposition')
            //获取fileName，先将"全局替换为空，再从=开始截取字符串
            fileName = ContentDisposition.replace(/"/g,"").split('=')[1];

            // 文件下载实现
            let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(successData);//encodeURIComponent解决中文乱码
            //通过创建a标签实现
            let link = document.createElement("a");
            link.href = uri;
            //对下载的文件命名
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    })
}  

点击 "Download" 按钮，下载 react_test1 文件

需要获取文件名称（filename），如图所示：

下载成功，且文件名称与 filename 一致，如图所示：

欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章。