纯JS实现POST方式发送请求到java后台

最新推荐文章于 2023-12-26 17:34:16 发布

精打细算

最新推荐文章于 2023-12-26 17:34:16 发布

阅读量6.3k

点赞数 1

分类专栏： js+css+htm 文章标签： js提交post poi导出echarts 获取图片编码

本文链接：https://blog.csdn.net/weixin_40076255/article/details/90443335

版权

js+css+htm 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在使用POI导出echarts统计报表的时候

1.前台请求后台最方便的请求方式是get，但get方式提交参数长度有限制，不适用于提交echarts统计图生成的图片信息。

var picBaseCode=myChart.getDataURL();

通过以上方法获取到echarts统计图的图片信息，picBaseCode是一段字符串类型的编码，内容超出了get提交的参数大小限制。

2.JQuery.Ajax以post形式提交请求

Ajax直接调用后台的下载方法是导出不了文件的，原因是Ajax请求只是个“字符型”的请求，即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行的，ajax没法解析后台返回的文件流，所以无法处理二进制流response输出来下载文件，无法实现导出。

解决办法：纯JS实现POST方式发送请求到java后台

//导出Excel
function reportExcel(reportType,picBaseCode,unitNames,startDate,endDate,status,delayNum){
	var url=webCfg.servePath +"/reportForm/reportExcel";
    var params = {
    	"reportType":reportType,
    	"picBaseCode":picBaseCode,
    	"unitNames":encodeURI(unitNames),
    	"startDate":startDate,
    	"endDate":endDate,
    	"status":encodeURI(status),
    	"delayNum":encodeURI(delayNum)        
    };

    httpPost(url, params);
}

//发送POST请求跳转到指定页面
function httpPost(URL, PARAMS) {
    var temp = document.createElement("form");
    temp.action = URL;
    temp.method = "post";
    temp.style.display = "none";

    for (var x in PARAMS) {
        var opt = document.createElement("textarea");
        opt.name = x;
        opt.value = PARAMS[x];
        temp.appendChild(opt);
    }

    document.body.appendChild(temp);
    temp.submit();

    return temp;
}

这段代码就是通过虚拟表单的形式提交post请求，从而实现请求后台，最后又不影响Excel文件流返回页面。

参考资料：https://blog.csdn.net/shiyong1949/article/details/72471294