js 页面跳转post传值

在JavaScript中，页面跳转时传递POST数据通常不像GET请求那样直接，因为URL的长度限制和安全性考虑。以下是一些方法和基础概念：

基础概念

GET请求：数据通过URL传递，适用于数据量小且不敏感的情况。
POST请求：数据通过请求体传递，适用于数据量大或敏感数据。

方法一：使用表单提交

你可以动态创建一个表单并提交它来实现POST跳转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>POST跳转示例</title>
</head>
<body>
    <script>
        function postRedirect(url, data) {
            var form = document.createElement("form");
            form.method = "POST";
            form.action = url;
            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    var hiddenField = document.createElement("input");
                    hiddenField.type = "hidden";
                    hiddenField.name = key;
                    hiddenField.value = data[key];
                    form.appendChild(hiddenField);
                }
            }
            document.body.appendChild(form);
            form.submit();
        }

        // 使用示例
        var data = { username: "testuser", password: "testpass" };
        postRedirect("target_page.html", data);
    </script>
</body>
</html>

方法二：使用Fetch API和重定向

虽然Fetch API本身不支持直接跳转，但你可以发送POST请求并处理响应。

function postAndRedirect(url, data) {
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    }).then(response => {
        if (response.ok) {
            window.location.href = url; // 或者其他处理
        }
    }).catch(error => console.error('Error:', error));
}

// 使用示例
var data = { username: "testuser", password: "testpass" };
postAndRedirect("target_page.html", data);

方法三：使用第三方库

例如，使用axios库可以简化POST请求的处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>POST跳转示例</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <script>
        function postRedirectWithAxios(url, data) {
            axios.post(url, data)
                .then(response => {
                    window.location.href = url; // 或者其他处理
                })
                .catch(error => console.error('Error:', error));
        }

        // 使用示例
        var data = { username: "testuser", password: "testpass" };
        postRedirectWithAxios("target_page.html", data);
    </script>
</body>
</html>

应用场景

登录页面：用户提交登录表单后，服务器验证并重定向到主页。
支付页面：用户在支付页面提交支付信息后，服务器处理并重定向到支付结果页面。

注意事项

安全性：避免在URL中传递敏感数据，使用POST请求传递敏感信息。
数据大小：GET请求有URL长度限制，POST请求没有这个限制。

通过上述方法，你可以在JavaScript中实现页面跳转时传递POST数据。选择哪种方法取决于你的具体需求和应用场景。

页面内容是否对你有帮助？

有帮助

没帮助

如何在html和烧瓶中的表单提交之后默认到页面的底部？

、、、、

<form action = '/prediction' method = 'post'>我希望表单在页面底部而不是顶部打开如果这是不可能的，我可以让页面在底部直接打开在我的烧瓶应用程序，在那里我创建的网址？@app.route('/prediction', methods = ['GET&#x

浏览 5提问于2022-01-24得票数 0

6回答

在PHP中保存$_POST['username']的状态

、

如何在PHP中保存$_POST['username']的状态。我做了一个表单来登录，该表单发布到MySql，但它也发布到用户页面，如何保存用户页面的状态，以便当用户转到另一个页面时，状态仍将被保存，直到您再次登录。

浏览 1提问于2013-02-12得票数 0

回答已采纳

1回答

如何使用php和htaccess为diff页面编写多个url

、

我能够与一个网址重写使用PHP和htaccess作为: index.php页面代码PHP代码： $_SESSIONpost方法，我跳转到包页面，url为：下面是包含url而不是第二个RewriteEngine On R

浏览 2提问于2018-03-19得票数 0

1回答

问题js？

怎么用js代码把腾讯云cos的图片下载到本地，之前已经用js代码上传到储存桶了。有没有代码参考？

浏览 265提问于2018-09-11

1回答

我想开发一个产品信息查询的小程序，后台请求数据的服务器应该如何实现，希望给出具体步骤，谢谢？

浏览 318提问于2017-11-12

1回答

facebook Tab应用程序上的PHP会话

、

the session $_SESSION['product'] = $product; if (isset($_POST['surname'])){$surname

浏览 1提问于2012-10-03得票数 0

回答已采纳

1回答

如果只传递了一项，则EJS不显示值

、、、

当从app.js文件向checkout.ejs文件传值时，如果我选中多个复选框，所有相关的图像都会在结帐时显示出来。ejs页面，但如果我只按一个复选框来检索单个图像，就不会发生这种情况。这是我的app.jsUser.findById(req.user.id, function (err,/uploads/<%=SIMG[i]%>

浏览 17提问于2020-05-14得票数 1

回答已采纳

1回答

JS传值失败？

、

我有以下代码，这是更新一个表单的点击。当填充标题和内容时，它工作得很好。当我添加startDate时，什么也没有填充。我假设我的语法中有一些地方是错误的，但是所有的逻辑在我看来都是正确的。我是不是遗漏了什么？ function changeText(title, content, startDate){ document.getElement

浏览 4提问于2016-04-10得票数 0

1回答

ID不是使用php、jquery、ajax从一个页面传递到另一个页面。

、

我有一个搜索栏，在那里我正在显示数据库中不同表的所有记录(只显示标题)，现在除了标题，我还想传递id，如何使用ajax将id从一个页面传递到另一个页面？/config.php');{ $_SESSION['CHOOSEN_LANGUAGEFOR INSERT CITY BASED ON LAT LONG /&#

浏览 1提问于2016-08-26得票数 0

3回答

Order by MYSQL动态子句。使用$_REQUEST

、、

我在我的页面上有一个$_REQUEST变量跳转菜单，允许人们按post_time更改ASC或DESC顺序。问题是将缺省值设置为DESC顺序，并在不更改URL $_REQUEST变量的情况下使其正常工作。这就是我所拥有的：<form name="form" id="form"> <select name="jumpMenu" id="jumpMenu" onchange="MM_jum

浏览 1提问于2010-11-03得票数 0

0回答

h5缓存页面内容，跳转到下一页面，再返回，发现JS不起作用了？

、

2b2a1000135ba960c632d.jpg js跳转，跳转前缓存一下当前页面内容，然后返回时，发现页面的JS全部失效了。再次点击a标签，无法跳转，而且全部的js都失效了。

浏览 529提问于2019-09-12

1回答

ASP.net c#使超链接指向页面锚点

、、

// Post quoteGDQ.ToolTip = "Quote this post";在我的页面上，我有：但是，此url指向： http://127.0.0.1/Site&#

浏览 0提问于2011-04-19得票数 0

回答已采纳

15回答

如何使用JQuery获取CKEditor的内容？

、、

我使用页面方法通过ajax保存表单值。我不回传这个页面。我能为此做些什么呢？

浏览 11提问于2010-09-27得票数 56

回答已采纳

1回答

在URL栏中按ENTER时如何纠正Firefox中的锚滚动位置

、、、、

我在页面顶部有一个浮动菜单，所以所有的锚滚动位置都由给定的值关闭。我正在通过一个非常简单的jQuery代码来纠正Javascript中的这种情况： if (window.location.hash !当用户单击链接或打开一个新选项卡时，Firefox运行JS并通过.scrollTop()修复滚动位置。然而，当用户只在已经打开的页面上单击ENTER时，Firefox不会重新运行JS，它只会快速跳转锚。跳转到错误的位置，因为它不是由JS代码修复的。Chro

浏览 0提问于2015-07-05得票数 0

回答已采纳

1回答

如何在博客文章中添加自动跳转

、

因为在索引页面上添加博客中的文章摘要有多个教程可用。问题是，这篇文章仍然完全加载了页面，这使得博客变得更慢。我有一个带有120+帖子的博客，我无法通过post编辑器在其中添加单独的跳转中断。在索引页面上是否有其他方法可以自动添加跳转( post编辑器可以添加的实际跳转中断，而不是post摘录读取更多按钮)？谢谢

浏览 7提问于2016-07-04得票数 1

回答已采纳

2回答

当页面跳转时，请求丢失

、、、

fetch(url, { method: 'POST', body: data, mode: 'cors' }).then(); 我有一个页面，页面有一个跳转按钮，当我点击这个按钮时，我的页面被location.href或window.open ()跳转到另一个页面。但是我想通过上面的fet

浏览 5提问于2017-06-03得票数 0

1回答

从json转换到经典asp

、、、

我有一个在js中工作的原型系统var promise = $.ajax({ method: "post",var valid = result.data[0].valid;我们现在将应用程序更改为调用asp页面，该页面可能类似于我想要做的是以和以前一样的格式进行回传，比如 {&qu

浏览 4提问于2015-08-27得票数 0

回答已采纳

5回答

如何在页面之间传递值？(Windows Phone)

、、、、

我知道我可以使用uri在页面之间传递值，例如：new Uri("/DestinationPage.xaml?parameter1=v1", UriKind.Relative)有没有其他方法可以让我在页面之间传值？

浏览 0提问于2012-03-27得票数 2

1回答

带有直接链接的Php post

、

我有一个球员页面，其中返回球员的列表，并为您提供一些选项。一个是edit，另一个是stats。可以预见，编辑页面会将您带到一个表单，您可以在其中编辑球员信息，如姓名，而统计页面仅显示主要来自其他表的与该球员有关的统计数据(如已玩的游戏)。目前，这是用于获取统计数据的代码片段：{ include $_SERVER['

浏览 0提问于2013-03-19得票数 2

回答已采纳

1回答

从Ajax调用返回井号(£)

、、

这是我的jQuery调用 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js.src = "//connect.facebook.net/en_GB/all.

浏览 0提问于2014-01-13得票数 2

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js 页面跳转post传值

基础概念

方法一：使用表单提交

方法二：使用Fetch API和重定向

方法三：使用第三方库

应用场景

注意事项

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐