excel导出 利用post 或ajax

问题来源： 在利用window.location.href 实现跳转请求的时候都会直接将请求参数写在url中，比如：

 

使用get请求有几个问题：

1、数据直接暴露在地址栏，不安全

2、请求参数可能过长，不同浏览器对get请求的长度都有限制的

3、请求参数中含有特殊字符，如“{}”,后端接受这样的地址会报错

我需要携带的参数长且多，不能通多get实现。

解决

1. 利用post请求，只能通过提交表单的方式实现了（如果后端接收的数据类型是 application/x-www-form-urlencoded的话）

实现代码：（js动态创建表单提交后销毁）

$('#export_btn').click(function() {
    function post(url, params) { 
    var temp_form = document.createElement("form") //创建表单
    temp_form.action = url
    temp_form.target = "_self"
    temp_form.style.display = "none"
    for (var x in params) {
        var opt = document.createElement("textarea")
        opt.name = x
        opt.value = params[x]
        temp_form.appendChild(opt)
    }
    document.body.appendChild(temp_form)
    temp_form.submit()  //表单提交
}
    post('/Bumblebee/data/build/info', {"start_time": "2021-12-06", "end_time": "2021-12-06"})
})

2. 通过ajax实现

因为ajax请求只是个“字符型”的请求，即请求的内容是以文本类型存放的，而文件的下载是以二进制形式进行的，所以ajax无法处理二进制流的response来下载文件，只能通过原生ajax的方法进行下载

实现代码：（利用blob）

function post(url, params, title) {
    console.log('1')
    var xhr = new XMLHttpRequest()
    xhr.open('post', url)
    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8') //我用了json
    xhr.responseType = 'blob' //以blob的形式接收数据，一般文件内容比较大
    xhr.onload = function() {
    var content = this.response //Blob数据
    var elink = document.createElement('a') // 创建一个a标签用于下载
    elink.download = title //规定被下载的超链接目标名字
    elink.style.display = 'none' //标签隐藏
    var blob = new Blob([content])
    elink.href = URL.createObjectURL(blob) //规定链接指向的页面的URL
    document.body.appendChild(elink)
    elink.click() //原生dom触发
    document.body.removeChild(elink)
    alert('数据导出成功！')
 }
xhr.send(JSON.stringify(params))
}

补充知识：

 1. application/x-www-form-urlencoded：

浏览器的原生 <form> 表单，如果不设置 enctype(即编码)属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码(UrlEncoder.encode())。

很多时候，我们用 Ajax 提交数据时，也是使用这种方式。例如 JQuery 和 QWrap 的 Ajax，Content-Type 默认值都是「application/x-www-form-urlencoded;charset=utf-8」。

2. application/json：

告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。