javascript - anchor 标记 - 在同一窗口/选项卡中打开新位置，并使用 POST 传递值

Question

相关:

Make a link use POST instead of GET

Making href (anchor tag) request POST instead of GET?

如何才能使用户单击链接时将其重定向到新页面以及上一页上的输入内容？我必须处理 POST 请求，并且我不想使用任何隐藏表单(或与此相关的任何其他表单)，正如链接(以及许多其他 SO)答案中所建议的那样。这可行吗？

我当前的设置(不允许我进行太多更改)如下:

<form role="form" id="myForm" method="post" action="stuff.php">
    <div class="form-body form-body-dark">
        <div class="form-actions">

            <div class="row">
                <!-- various inputs go here -->
            <input type="text" name="userID">
            </div>

            <div class="row">
                <div class="col-md-6 col-xs-6">
                    <button type="submit" id="doStuff" class="btn btn-primary btn-lg btn-block"><i class="fa fa-check"></i> Submit</button>
                </div>                                      
                <div class="col-md-6 col-xs-6">
                    <a href="index.php" id="cancel" class="btn btn-danger btn-lg btn-block"><i class="fa fa-refresh"></i> Cancel
                    </a>
                </div>                                      
            </div>

        </div>  
    </div>
</form>

现在，我需要添加另一种提交部分相同输入的方法，但提交到另一个 php 页面。我想使用 anchor 标记和 POST 请求来做到这一点。应在第一个按钮(提交)之前插入的代码块，但形式相同:

HTML

<div class="col-md-4 col-xs-4">
    <a onclick="goToOtherPage()" id="details" class="btn btn-success btn-lg btn-block">
        <i class="fa fa-table"></i> Details
    </a>                                 
</div>

jQuery

function goToOtherPage() {
   var otherPage = "details.php";
   $.post(otherPage, { 
       'userID': $('#userID').val()
   }
}

在传递 userID 之后，在函数内添加 window.location.href = 'details.php' 将打开新页面，但没有我想要传递的参数。

我考虑过设置和取消设置 cookie，并绕过整个 POST/GET 问题，但这不是一个可行的选择。

Answer 1

您可以使用 SessionStorage API 在一个页面上保存一些数据，然后在另一页面上访问该数据，而不是使用 Cookie。看看sessionStorage MDN .

只需在您的 goToOtherPage 回调中保存任何数据，如下所示:

sessionStorage.setItem('formData', {});

稍后，在下一页上，您可以通过以下方式访问上一页上保存的数据:

sessionStorage.getItem('formData');