JavaScript 通过 POST 方式实现页面跳转

作者：函数茶馆

时间：2026-10-23

本文介绍如何在 JavaScript 中通过 POST 方式实现页面跳转。对比 GET 方式参数暴露于 URL 的安全隐患，详细讲解利用动态创建虚拟表单（form）并提交数据的方法。提供完整的 httpPost 函数代码及实际业务场景下的调用示例，帮助开发者在需要传输敏感或大量数据时选择更安全的跳转方案。

文章目录

GET 方式跳转的局限性

在 JavaScript 开发中，是常用的页面跳转手段。这种方式本质上是使用 GET 方法发送请求，其示例代码如下所示。


window.location.href = url;

该方法的优点在于实现简单、易于使用，但缺点同样明显：如果请求包含参数，这些参数会直接暴露在 URL 地址栏中。这不仅降低了系统的安全性，也可能影响用户体验。接下来我们将探讨如何通过 POST 请求来实现页面跳转。


//发送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 跳转实现

上述代码通过构建一个虚拟表单来提交 POST 请求，从而完成页面跳转。具体的实现示例如下。


function toMonitorCompanyList(groupName,riskLevel,updateStatus,province,eventLevel,reportId,riskStatus){

 var params = {
  "groupName": encodeURIComponent(groupName),
  "riskLevel": riskLevel,
  "updateStatus": updateStatus,
  "province": encodeURIComponent(province),
  "eventLevel": eventLevel,
  "reportId": reportId,
  "riskStatus":riskStatus
 };

 httpPost(ctx + "/monitorCompany/toMonitorCompanyList", params);
}