js实现get和post两种方式的导出/下载请求

本文探讨了在前端开发中,面对GET请求参数过长的问题,如何采用POST方式导出数据。介绍了通过创建隐藏的form表单进行POST请求的具体实现方法,适用于Vue项目。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目需求: 前端需要传入过多的参数给后端,get请求会超长,只能接受post方式去导出数据。

1、get方式

let url =  xxxx.action?a=xx&b=yy;
window.location.href = url;
// 或者
window.open(url, '_self')

弊端:当请求参数较多时,get的方式无法使用,这时候需要考虑post的方式,但是直接通过ajax的post的方式无法调用浏览器的下载功能 

2、post方式

原理: 创建一个隐藏form表单,通过form表单的提交刷新功能,实现下载。代码如下:

// vue项目代码
  // 导出excel
    postExcelFile(params, url) {
      //params是post请求需要的参数,url是请求url地址
      var form = document.createElement("form");
      form.style.display = "none";
      form.action = url;
      form.method = "post";
      document.body.appendChild(form);
    // 动态创建input并给value赋值
      for (var key in params) {
        var input = document.createElement("input");
        input.type = "hidden";
        input.name = key;
        input.value = params[key];
        form.appendChild(input);
      }

      form.submit();
      form.remove();
    }

    //调用
     this.postExcelFile(
        { currentPage: 2, pageSize: 20 },
        'url/xxxxxxx/'
      );

参考:https://www.cnblogs.com/shengmo/p/10812481.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值