Question

我正在处理用户管理表。它具有一列“Validate”或“Revoke”按钮，具体取决于用户是否已在数据库中验证过。 e.g。

<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();

与上述问题相同。

Answer 1

当你实际希望当前路线的重定向而不某种背景对话时（通常会涉及Ajax发布请求））在我看来，涉及表格并实际提交它的方法是这里的自然选择，正如@ hugo411在之前的回答中已经提到的那样。

为此你应该稍微修改你的方法：

表单本身不需要是不可见的，只需通过一些标准HTML代码（使用method="post"）在您的页面上定义，但只能一次。根据您还希望在每次提交时发布的其他输入字段，您应该将其包裹在整个表格或每个单独的行中。
然后，您需要将一个函数绑定到表单中每个按钮的click事件，该表单将在提交之前设置（父）表单的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(){ ... }) - 部分中）：

$('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()绑定使您可以灵活地动态地将更多按钮添加到表单中。然后它们将自动绑定到同一个事件函数。

Answer 2

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

Answer 3

您可以使用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>

Answer 4

您可能有一个带有隐藏字段的表单来发布数据。我认为以下链接会很有用。

Send POST data on redirect with JavaScript/jQuery?

如何使window.location.href做POST请求

4 个答案: