使用 JavaScript/jQuery 在重定向上发送 POST 数据？ [复制]
Posted
技术标签:
【中文标题】使用 JavaScript/jQuery 在重定向上发送 POST 数据？ [复制]【英文标题】：Send POST data on redirect with JavaScript/jQuery? [duplicate] 【发布时间】：2012-01-13 10:46:42 【问题描述】：基本上我想做的是在我更改window.location 时发送POST 数据，就好像用户已经提交了一个表单并转到了一个新页面。我需要这样做，因为我需要传递一个隐藏的 URL，而且出于美观的原因，我不能简单地将它作为 GET 放在 URL 中。
这是我目前拥有的，但它不发送任何 POST 数据。
if(user has not voted)
window.location = 'http://example.com/vote/' + Username;
我知道你可以用jQuery.post() 发送POST 数据，但我需要用新的window.location 发送它。
回顾一下，我需要通过POST 将api_url 值发送到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();
【问题讨论】：
【参考方案1】：根据@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();
【讨论】：
我更喜欢这种方法而不是 Kevin 的方法，因为您不必在 html 中添加表单。我想这样做的原因是我已经有一个表单并在其中嵌套了另一个表单。出于某种原因，我的主要形式决定在另一个开始的地方停止，忽略随后的所有输入。我知道这不应该发生，但是你去吧。当您想使用来自一段 JS 的 POST 数据“重定向”时，上述方法很好。虽然当我这样做时，我真的无法摆脱肮脏的感觉；）。 请注意，最后一行的$(form) 是多余的。
补充一下，当前的方法会在提交之前在“UI”上显示几分之一秒的表单。为了使其完美，将 'style' 属性添加到表单标签中，其值为 'display: none;' .
只要表单元素上没有样式（边框、边距等），您就可以改用type="hidden"。
我发现 $('body').append(form);在IE浏览器中非常有必要！【参考方案2】：
构造并填写一个隐藏的method=POST action="http://example.com/vote" 表单并提交，而不是使用window.location。
【讨论】：
有没有办法使用嵌套对象来做到这一点？假设我需要传递的数据"a":"b":"c"。有没有办法用表格做到这一点？
@AakilFernandes 您始终可以JSON.stringify 您的对象并将生成的字符串放入表单字段中。您不能发送表单不支持的任意 POST 内容类型。
但是如果已经有<form> 怎么办？ form标签不能嵌套怎么办？？
@Malky.Kid 像通常使用表单一样执行此操作，例如 （使用 @AakilFernandes 的数据） 您将在表单中创建 <input type="hidden" name="a[b]" value="c">，其中“ b" 是 "a" 的属性，值为 "c"。【参考方案3】：
这是一个简单的小函数，只要你使用 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();
);
【讨论】：
请注意，这仅适用于像示例一样深一层的数据。对于x: z:'example', y: 'abc' 等数据，您必须使用JSON.stringify，然后在您的服务器端代码中解码。
@AakilFernandes Json.stringify 在哪里？
@angel 在现代浏览器中，应该有一个全局 JSON 对象
显然这个功能需要“jquery.redirect.min.js 插件”【参考方案4】：
这是一个不使用 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();
【讨论】：
【参考方案5】：如果您使用的是 jQuery，则有一个 redirect plugin 可以与 POST 或 GET 方法一起使用。它创建一个带有隐藏输入的表单并为您提交。一个如何让它工作的例子：
$.redirect('demo.php', 'arg1': 'value1', 'arg2': 'value2');
注意：您可以将方法类型 GET 或 POST 作为可选的第三个参数传递； POST 是默认设置。
【讨论】：
这个插件非常适合我，谢谢。我只是将整个类复制并粘贴到我的代码中，并使用您必须对其进行测试的示例，它运行良好。现在正确地包含它...【参考方案6】：这里的答案可能会令人困惑，所以我会给你一个我正在使用的示例代码。
首先请注意，您所指的 java 脚本 windows.location 函数没有 POST 参数。
所以你必须...
使用 POST 参数动态创建表单。
动态放置一个或多个包含您想要的值的文本框来发布
调用您动态创建的提交表单。
举个例子。
//---------- 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>
如果一切顺利，您将被重定向到 test2.php，您可以使用 POST 读取传递的employee_name 和salary 值；那将分别是 Peter 和 1000。
在 test2.php 上你可以得到你的值。
$employee_name = $_POST['employee_name'];
$salary = $_POST['salary'];
不用说，请确保您清理了传递的值。
【讨论】：
好答案。这将帮助一些人 你是个超级明星。节省了我的一整天:) 你好，我无法理解的是，由于这是一个发布请求，目标 url 将如何加载其各自的页面？ 嘿vigamage。这样做的目的不是在 test2.php 中显示值。相反，它是处理 POST 值。例如。将员工姓名和工资保存到数据库中。【参考方案7】：将任何 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();
【讨论】：
【参考方案8】：使用起来非常方便：
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();
;
然后像这样使用它：
myRedirect("/yourRedirectingUrl", "arg", "argValue");
【讨论】：
【参考方案9】：var myRedirect = function(redirectUrl)
var form = $('<form action="' + redirectUrl + '" method="post">' +
'<input type="hidden" name="parameter1" value="sample" />' +
'<input type="hidden" name="parameter2" value="Sample data 2" />' +
'</form>');
$('body').append(form);
$(form).submit();
;
在http://www.prowebguru.com/2013/10/send-post-data-while-redirecting-with-jquery/找到代码
将尝试这个和其他对我的工作的建议。
有没有其他方法可以做到这一点？
【讨论】：
【参考方案10】：您可以使用target 属性从 iframe 发送带有重定向的表单。
您的表单打开标记将是这样的：
method="post" action="http://some.url.com/form_action" target="_top"
【讨论】：
【参考方案11】：解决方案编号。 1
//your variable
var data = "brightcherry";
//passing the variable into the window.location URL
window.location.replace("/newpage/page.php?id='"+product_id+"'");
解决方案编号。 2
//your variable
var data = "brightcherry";
//passing the variable into the window.location URL
window.location.replace("/newpage/page.php?id=" + product_id);
details
【讨论】：
请求是 POST 而不是 GET IMO 从不推荐在 url 中传递变量 你给了我一个实用的解决方案，谢谢 =) 虽然我的工作是 POST 请求，但 GET 非常好，谢谢，就我而言。 学习者给学习者的回答 您应该在回答中注意这是 GET 而不是 POST，但对于某些数据较短且可以在 URL 中显示的情况，这是一个可行的替代方案以上是关于使用 JavaScript/jQuery 在重定向上发送 POST 数据？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章