如何让 window.location.href 做 POST 请求答案

【问题标题】：How to make window.location.href do the POST request如何让 window.location.href 做 POST 请求
【发布时间】：2018-07-30 08:52:14
【问题描述】：

我正在处理用户管理表。它有一列“验证”或“撤销”按钮，具体取决于用户是否已在数据库中验证。例如

<td><button type="button" class="btn btn-primary btn-md"  onclick= "Validate(this)" userID={{user.id}}>Validate</button></td>

当用户点击按钮时，它会重定向到调用window.location.href下面的函数来重定向一个新的路由

function Validate(user) {
     var id  = user.getAttribute("userID")
     window.location.href = ("/userManagement/validate/" + id), true
}

问题是，window.location.href 执行的是 GET 而不是 POST。如何修改它，或者有没有其他方法可以通过 POST 请求重定向到我的另一条路线？

谢谢。

这是我根据建议尝试的：

$('#inset_form').html('<form action="/userManagement/validate/' + id + '" name="validate" method="post" style="display:none;"><input type="text" name="api_url" value="' + Return_URL + '" /></form>');

document.forms['vote'].submit();

或

var url = "/userManagement/validate/" + id;
            var form = $('<form action="' + url + '" method="post">' +
            '<input type="text" name="api_url" value="' + Return_URL + '" />' +
            '</form>');
            $('body').append(form);
            form.submit();

它不会重定向/重新加载页面，我也不认为它可以访问新路由。另外，我试过了，

var addr = "/userManagement/validate/" + id ;
            var xhr = new XMLHttpRequest();
            xhr.open('POST', addr, true);
            xhr.send();

与上述相同的问题。

【问题讨论】：

你不要这样。 window.location.href 将始终是一个 GET 请求。作为标准，请改用 AJAX 在服务器上发布您的数据并等待请求
@CodeLover：您能否详细说明您的评论？我对此很陌生，以前从未做过 ajax。
好吧，如果您从未使用过 AJAX，那么您需要大量阅读和打字。 AJAX means Asynchronous Javascript and XML 是 JS 中用于客户端和服务器通信的 XMLHttpRequest 对象。网上有很多不错的文章。更多细节在这里w3schools.com/xml/ajax_intro.asp
顺便说一句，我的第一条评论。应该是wait for the response。

标签： javascript php node.js html

【解决方案1】：

正如您实际上想要当前路由的重定向并且不某种背景对话（通常涉及Ajax发布请求) 在我看来，涉及表单并实际提交表单的方法是这里的自然选择，正如@hugo411 在较早的答案中已经提到的那样。

为此，您应该稍微修改一下您的方法：

表单本身不需要是不可见的，它可以通过一些标准的 HTML 代码（使用method="post"）在您的页面上简单地定义，但只能一次。根据您还希望在每次提交时发布的其他输入字段，您应该将其包裹在整个表格或每一行中。
然后，您需要将一个函数绑定到表单中每个按钮的单击事件，该函数将在提交之前设置（父）表单的action 属性。

HTML：

<form class="myrouter" method="post">
<table>...
  ...<td><button type="button" class="btn btn-primary btn-md" userID={{user.id}}>Validate</button></td> ...
  ... </table>
</form>

已编辑： JavaScript（在 jquery $(function(){ ... })-section 中）：

$('form.myrouter').on('click','button',function(ev){
  // some debugging stuff, if necessary ...
  console.log('current id:',this.userId);
  // in the current context "this" points to the clicked button
  $(this).closest('form').attr('action','/userManagement/validate/'+this.userId).submit();
  // finds the form object, changes the "action" and submits it
}

在此编辑版本中，id 取自每个按钮的 userId 属性。将事件函数与on() 绑定可以让您灵活地在表单中动态添加更多按钮。然后它们将自动绑定到相同的事件函数。

【讨论】：

【解决方案2】：

您可以使用 ajax 来通过 POST 提交

var id  = user.getAttribute("userID")
$.ajax({        
    url: '/userManagement/validate/',
    data: { userid : id },
    type: 'POST',
    success: function (response) {
        alert(response);
    },
    error: function(e){
        alert('Error: '+e);
    }  
});

但是当然这不会刷新您的页面，您可以处理响应然后重定向。如果您想坚持使用您的东西，则需要围绕该按钮提交表单。

<form action="/userManagement/validate/" method="post">
<input type="hidden" id="userid" name="userid" value="{{user.id}}">
<button type="submit">
</form>

【讨论】：

表单+按钮会重定向到我的路由“/userManagement/validate/:id”吗？

【解决方案3】：

如果您想提交表单而不实际提交，您将需要使用 jQuery AJAX：异步 JavaScript 和 XML。在传统的 JavaScript 中可以做到这一点，但 jQuery 使这样的事情变得更容易。 Have a look at this reference page。这是.post() 的那个，它的作用几乎相同。

【讨论】：