使用 JavaScript/jQuery 在重定向时发送 POST 数据？

IT技术 javascript jquery post
2021-02-03 21:40:03

基本上我想要做的是POST在我更改 时发送数据window.location，就好像用户提交了一个表单并且它转到了一个新页面。我需要这样做，因为我需要传递一个隐藏的 URL，而且GET出于美观的原因，我不能简单地将它放在 URL 中。

这是我目前所拥有的，但它不发送任何 POST 数据。

if(user has not voted) {

    window.location = 'http://example.com/vote/' + Username;

}

我知道您可以使用 发送POST数据jQuery.post()，但我需要使用新的window.location.

因此，要回顾一下，我需要发送api_url通过valuePOST来http://example.com/vote/，而在同一时间向用户发送到同一页面。

为了将来参考，我最终做了以下事情：

if(user has not voted) {

    $('#inset_form').html('<form action="http://example.com/vote/' + Username + '" name="vote" method="post" style="display:none;"><input type="text" name="api_url" value="' + Return_URL + '" /></form>');

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

}
6个回答

根据@Kevin-Reid 的回答，这里有一个替代“我最终做了以下事情”的例子，它避免了命名，然后通过专门构造表单（使用 jQuery）来再次查找表单对象。

var url = 'http://example.com/vote/' + Username;
var form = $('<form action="' + url + '" method="post">' +
  '<input type="text" name="api_url" value="' + Return_URL + '" />' +
  '</form>');
$('body').append(form);
form.submit();
只是补充一下，当前的方法会在提交之前在“UI”上显示表单几分之一秒。只是为了使它完美，将 'style' 属性添加到值为 'display: none;' 的表单标签中 .
2021-03-16 21:40:03
请注意，$(form)最后一行是多余的。
2021-04-01 21:40:03
我发现 $('body').append(form); 在 IE 浏览器中非常有必要！
2021-04-02 21:40:03
与 Kevin 的方法相比，我更喜欢这种方法，因为您不必向 html 添加表单。我想这样做的原因是我已经有一个表单并在其中嵌套了另一个表单。出于某种原因，我的主窗体决定在另一个开始的地方停止，忽略随后的所有输入。我知道这不应该发生，但你去了。当您想使用来自一段 JS 的 POST 数据“重定向”时，上述方法很好。虽然当我这样做时我真的无法摆脱肮脏的感觉;)。
2021-04-10 21:40:03
只要表单元素上没有样式（边框、边距等），您就可以使用它type="hidden"。
2021-04-11 21:40:03

构建并填写一个隐藏的method=POST action="http://example.com/vote"表单并提交它，而不是使用它window.location。

但是如果<form>已经有了呢？由于form标签不能嵌套，可以做什么？
2021-03-14 21:40:03
有没有办法使用嵌套对象来做到这一点？说我需要{"a":{"b":"c"}}传递的数据。有没有办法用表格来做到这一点？
2021-03-24 21:40:03
@Malky.Kid 像通常使用表单一样执行此操作，例如（使用@AakilFernandes 的数据）您将<input type="hidden" name="a[b]" value="c">在表单中创建，其中“b”是“a”的属性，值为“c”。
2021-04-06 21:40:03
@AakilFernandes 您始终可以JSON.stringify将对象放入表单字段中。您不能发送表单不支持的任意 POST 内容类型。
2021-04-07 21:40:03

这是一个简单的小函数，只要您使用 jQuery，它就可以应用于任何地方。

var redirect = 'http://www.website.com/page?id=23231';
$.redirectPost(redirect, {x: 'example', y: 'abc'});

// jquery extend function
$.extend(
{
    redirectPost: function(location, args)
    {
        var form = '';
        $.each( args, function( key, value ) {
            value = value.split('"').join('\"')
            form += '<input type="hidden" name="'+key+'" value="'+value+'">';
        });
        $('<form action="' + location + '" method="POST">' + form + '</form>').appendTo($(document.body)).submit();
    }
});
@angel 在现代浏览器中，应该有一个全局的 JSON 对象
2021-03-21 21:40:03
显然这个功能需要“jquery.redirect.min.js plugin”
2021-03-21 21:40:03
@AakilFernandes Json.stringify 在哪里？
2021-03-30 21:40:03
请注意，这仅适用于像示例一样深一层的数据。对于诸如{x: {z:'example'}, y: 'abc'}您必须JSON.stringify然后在服务器端代码中解码的数据。
2021-04-10 21:40:03

如果您使用的是 jQuery，则有一个可与 POST 或 GET 方法配合使用的重定向插件。它会创建一个带有隐藏输入的表单并为您提交。如何让它工作的一个例子：

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});

注意：您可以将方法类型 GET 或 POST 作为可选的第三个参数传递；POST 是默认设置。

这个插件对我很有用，谢谢。我只是将整个课程复制并粘贴到我的代码中，并使用您必须对其进行测试的示例，它运行良好。现在要正确地包含它...
2021-04-10 21:40:03

这是一个方法，它不使用 jQuery。我用它来创建一个书签，它检查 w3-html-validator 上的当前页面。

var f = document.createElement('form');
f.action='http://validator.w3.org/check';
f.method='POST';
f.target='_blank';

var i=document.createElement('input');
i.type='hidden';
i.name='fragment';
i.value='<!DOCTYPE html>'+document.documentElement.outerHTML;
f.appendChild(i);

document.body.appendChild(f);
f.submit();
其它你可能感兴趣的问题
上一篇如何使用jQuery设置输入文本的值 下一篇删除特定类型的所有事件侦听器