JQuery-使用文章数据重定向

小开

Why dont just create a form with some hidden inputs and submit it using jQuery? Should work :)

小开

最佳答案

There is a JQuery plug-in that accomplishes pretty much what you're trying to do: https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js.

After including JQuery and the jquery.redirect.min.js plug-in, you can simply do something like this:

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

Use the following code on newer JQuery versions instead:

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

Hope this helps!

小开

why not just use a button instead of submit. clicking the button will let you construct a proper url for your browser to redirect to.

$("#button").click(function() {
var url = 'site.com/process.php?';
$('form input').each(function() {
url += 'key=' + $(this).val() + "&";
});
// handle removal of last &.


window.location.replace(url);
});

小开

This needs clarification. Is your server handling a POST that you want to redirect somewhere else? Or are you wanting to redirect a regulatr GET request to another page that is expecting a POST?

In either case what you can do is something like this:

var f = $('<form>');
$('<input>').attr('name', '...').attr('value', '...');
//after all fields are added
f.submit();

It's probably a good idea to make a link that says "click here if not automatically redirected" to deal with pop-up blockers.

小开

I included the jquery.redirect.min.js plugin in the head section together with this json solution to submit with data

<script type="text/javascript">
$(function () {
$('form').on('submit', function(e) {
$.ajax({
type: 'post',
url: 'your_POST_URL',
data: $('form').serialize(),
success: function () {
// now redirect
$().redirect('your_POST_URL', {
'input1': $("value1").val(),
'input2': $("value2").val(),
'input3': $("value3").val()
});
}
});
e.preventDefault();
});
});
</script>

Then immediately after the form I added

 $(function(){
$( '#your_form_Id' ).submit();
});

小开

Here's a simple small function that can be applied anywhere as long as you're using 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 ) {
form += '<input type="hidden" name="'+key+'" value="'+value+'">';
});
$('<form action="'+location+'" method="POST">'+form+'</form>').appendTo('body').submit();
}
});

Per the comments, I have expanded upon my answer:

// jquery extend function
$.extend(
{
redirectPost: function(location, args)
{
var form = $('<form></form>');
form.attr("method", "post");
form.attr("action", location);


$.each( args, function( key, value ) {
var field = $('<input></input>');


field.attr("type", "hidden");
field.attr("name", key);
field.attr("value", value);


form.append(field);
});
$(form).appendTo('body').submit();
}
});

小开

Construct and fill out a hidden method=POST action="http://example.com/vote" form and submit it, rather than using window.location at all.

or

$('#inset_form').html(
'<form action="url" name="form" method="post" style="display:none;">
<input type="text" name="name" value="' + value + '" /></form>');
document.forms['form'].submit();

小开

Before document/window ready add "extend" to jQuery :

$.extend(
{
redirectPost: function(location, args)
{
var form = '';
$.each( args, function( key, value ) {


form += '<input type="hidden" name="'+value.name+'" value="'+value.value+'">';
form += '<input type="hidden" name="'+key+'" value="'+value.value+'">';
});
$('<form action="'+location+'" method="POST">'+form+'</form>').submit();
}
});

Use :

$.redirectPost("someurl.com", $("#SomeForm").serializeArray());

Note : this method cant post files .

小开

I think this is the best way to do it !

<html>
<body onload="document.getElementById('redirectForm').submit()">
<form id='redirectForm' method='POST' action='/done.html'>
<input type='hidden' name='status' value='complete'/>
<input type='hidden' name='id' value='0u812'/>
<input type='submit' value='Please Click Here To Continue'/>
</form>
</body>
</html>

This will be almost instantaneous and user won't see anything !

小开

Similar to the above answer, but written differently.

$.extend(
{
redirectPost: function (location, args) {
var form = $('<form>', { action: location, method: 'post' });
$.each(args,
function (key, value) {
$(form).append(
$('<input>', { type: 'hidden', name: key, value: value })
);
});
$(form).appendTo('body').submit();
}
});

小开

This would redirect with posted data

$(function() {
$('<form action="url.php" method="post"><input type="hidden" name="name" value="value1"></input></form>').appendTo('body').submit().remove();
});


}

the .submit() function does the submit to url automatically
the .remove() function kills the form after submitting

小开

"extended" the above solution with target. For some reason i needed the possibility to redirect the post to _blank or another frame:

$.extend(
{
redirectPost: function(location, args, target = "_self")
{
var form = $('<form></form>');
form.attr("method", "post");
form.attr("action", location);
form.attr("target", target);
$.each( args, function( key, value ) {
var field = $('<input></input>');
field.attr("type", "hidden");
field.attr("name", key);
field.attr("value", value);
form.append(field);
});
$(form).appendTo('body').submit();
}
});