使用JavaScript/jQuery在重定向上发送POST数据?

Jos*_*ett 203 javascript jquery post

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

这就是我目前所拥有的,但它不会发送任何POST数据.

if(user has not voted) {

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

}
Run Code Online (Sandbox Code Playgroud)

我知道你可以发送POST数据jQuery.post(),但我需要它与新的一起发送window.location.

因此,要回顾一下,我需要发送api_url通过价值POSThttp://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();

}
Run Code Online (Sandbox Code Playgroud)

tar*_*ate 205

根据@ 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();
Run Code Online (Sandbox Code Playgroud)

  • 我比Kevin的方法更喜欢这种方法,因为你不必在html中添加表单.我想这样做的原因是我已经有了一个表单并且在其中嵌套了另一个表单.出于某种原因,我的主要形式决定停止对方开始的地方,忽略了随后的所有输入.我知道这不应该发生,但你去了.当你想要从一段JS"重定向"POST数据时,上面的方法很好.虽然当我这样做时,我真的不能感到肮脏;). (7认同)
  • 只是补充一点,目前的方法在提交之前会在"UI"上显示一小段时间.为了使其完美,将'style'属性添加到表单标记中,其值为'display:none;' . (6认同)
  • 请注意,最后一行的`$(form)`是多余的. (4认同)
  • 只要表单元素(边框,边距和诸如此类)上没有样式,您就可以使用`type ="hidden"`. (4认同)
  • 我发现$('body').append(form); 在IE浏览器中是非常必要的! (3认同)
  • @ MatthewT.Baker我的意思是var form = $(...)给你一个jQuery实例.您不需要在$()中重新包装它.form.submit()就足够了. (3认同)

Kev*_*eid 154

构建并填写隐藏的method=POST action="http://example.com/vote"表单并提交,而不是完全使用window.location.

  • @AakilFernandes你总是可以`JSON.stringify`你的对象并将结果字符串放入表单字段.你**不能**发送一个表单本来不支持的任意POST内容类型. (6认同)
  • 有没有办法使用嵌套对象?说我需要数据`{"a":{"b":"c"}}`传递.有形式的方法吗? (3认同)
  • @ Malky.Kid就像你通常使用表格一样,例如_(使用@AakilFernandes'数据)_你要创建`<input type ="hidden"name ="a [b]"value ="c" >`表格中"b"是"a"的属性,值为"c". (2认同)

tfo*_*ont 49

这是一个简单的小函数,只要你使用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();
    }
});
Run Code Online (Sandbox Code Playgroud)


Tom*_*duy 26

如果您使用的是jQuery,则有一个可以使用POST或GET方法的重定向插件.它创建一个带有隐藏输入的表单并为您提交.如何使其工作的一个例子:

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});
Run Code Online (Sandbox Code Playgroud)

注意:您可以将方法类型GET或POST作为可选的第三个参数传递; POST是默认值.


小智 21

这是一个不使用jQuery的方法.我用它来创建一个bookmarklet,它检查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();
Run Code Online (Sandbox Code Playgroud)


小智 13

这里的答案可能令人困惑,所以我会给你一个我正在使用的示例代码.

首先请注意,您所指的java脚本windows.location函数没有POST参数.

所以你必须......

  1. 使用POST参数动态创建表单.

  2. 动态放置带有所需值的文本框或文本框以进行发布

  3. 调用动态创建的提交表单.

并举例说明.

     //---------- make sure to link to your jQuery library ----//

<script type="text/javascript" >

    var form = $(document.createElement('form'));
    $(form).attr("action", "test2.php");
    $(form).attr("method", "POST");
    $(form).css("display", "none");

    var input_employee_name = $("<input>")
    .attr("type", "text")
    .attr("name", "employee_name")
    .val("Peter" );
    $(form).append($(input_employee_name));


    var input_salary = $("<input>")
    .attr("type", "text")
    .attr("name", "salary")
    .val("1000" );
    $(form).append($(input_salary));

    form.appendTo( document.body );
    $(form).submit();

</script>
Run Code Online (Sandbox Code Playgroud)

如果一切顺利,您将被重定向到test2.php并且您可以使用POST来读取employee_name和salary的传递值; 这将分别是彼得和1000.

在test2.php上,您可以获得您的值.

$employee_name = $_POST['employee_name'];
$salary = $_POST['salary'];
Run Code Online (Sandbox Code Playgroud)

不用说,确保您清理传递的值.


the*_*ica 11

将任何JavaScript对象发布到给定URL的通用函数.

function postAndRedirect(url, postData)
{
    var postFormStr = "<form method='POST' action='" + url + "'>\n";

    for (var key in postData)
    {
        if (postData.hasOwnProperty(key))
        {
            postFormStr += "<input type='hidden' name='" + key + "' value='" + postData[key] + "'></input>";
        }
    }

    postFormStr += "</form>";

    var formElement = $(postFormStr);

    $('body').append(formElement);
    $(formElement).submit();
}
Run Code Online (Sandbox Code Playgroud)


小智 6

这非常方便使用:

var myRedirect = function(redirectUrl, arg, value) {
  var form = $('<form action="' + redirectUrl + '" method="post">' +
  '<input type="hidden" name="'+ arg +'" value="' + value + '"></input>' + '</form>');
  $('body').append(form);
  $(form).submit();
};
Run Code Online (Sandbox Code Playgroud)

然后使用它像:

myRedirect("/yourRedirectingUrl", "arg", "argValue");
Run Code Online (Sandbox Code Playgroud)