This is one of those situations where I feel like I'm missing a crucial keyword to find the answer on Google...
I have a bag of parameters and I want to make the browser navigate to a GET URL with the parameters. Being a jQuery user, I know that if I wanted to make an ajax request, I would simply do:
$.getJSON(url, params, fn_handle_result);
But sometimes I don't want to use ajax. I just want to submit the parameters and get a page back.
Now, I know I can loop the parameters and manually construct a GET URL. For POST, I can dynamically create a form, populate it with fields and submit. But I'm sure somebody has written a plugin that does this already. Or maybe I missed something and you can do it with core jQuery.
So, does anybody know of such a plugin?
EDIT: Basically, what I want is to write:
$.goTo(url, params);
And optionally
$.goTo(url, params, "POST");
Source: Tips4all
jQuery Plugin seemed to work great until I tried it on IE8. I had to make this slight modification to get it to work on IE:
ReplyDelete(function($) {
$.extend({
getGo: function(url, params) {
document.location = url + '?' + $.param(params);
},
postGo: function(url, params) {
var $form = $("<form>")
.attr("method", "post")
.attr("action", url);
$.each(params, function(name, value) {
$("<input type='hidden'>")
.attr("name", name)
.attr("value", value)
.appendTo($form);
});
$form.appendTo("body");
$form.submit();
}
});
})(jQuery);
It is not clear from the question if you have a random bunch of values you want to pass on the querystring or is it form values.
ReplyDeleteFor form values just use the .serialize function to construct the querystring.
e.g
var qString = $('#formid').serialize();
document.location = 'someUrl' + '?' + serializedForm
If you have a random bunch of values you can construct an object and use the .param utility method.
e.g
var params = { width:1680, height:1050 };
var str = jQuery.param( params );
console.log( str )
// prints width=1680&height=1050
// document.location = 'someUrl' + '?' + str
Here's what I ended up doing, using the tip from redsquare:
ReplyDelete(function($) {
$.extend({
doGet: function(url, params) {
document.location = url + '?' + $.param(params);
},
doPost: function(url, params) {
var $form = $("<form method='POST'>").attr("action", url);
$.each(params, function(name, value) {
$("<input type='hidden'>")
.attr("name", name)
.attr("value", value)
.appendTo($form);
});
$form.appendTo("body");
$form.submit();
}
});
})(jQuery);
Usage:
$.doPost("/mail/send.php", {
subject: "test email",
body: "This is a test email sent with $.doPost"
});
Any feedback would be welcome.
Update: see dustin's answer for a version that works in IE8
FYI for anyone doing the doPost for rails 3, you need to add in the CSRF token, Adding the following to the answer should do that...
ReplyDeletevar token = $('meta[name="csrf-token"]').attr('content');
$("<input name='authenticity_token' type='hidden' value='" + token + "'/>").appendTo($form);
Yes. Excellent itsadok! That's just what I was looking for. I think that this non-ajax get and post functionality should be officially included in jquery. Thanks.
ReplyDeleteGood job itsadok! If you want a invisible form put it into hidden DIV:
ReplyDelete(function($) {
$.extend({
doGet: function(url, params) {
document.location = url + '?' + $.param(params);
},
doPost: function(url, params) {
var $div = $("<div>").css("display", "none");
var $form = $("<form method='POST'>").attr("action", url);
$.each(params, function(name, value) {
$("<input type='hidden'>")
.attr("name", name)
.attr("value", value)
.appendTo($form);
});
$form.appendTo($div);
$div.appendTo("body");
$form.submit();
}
});
})(jQuery);
The accepted answer doesn't seem to cover your POST requirement, as setting document.location will always result in a GET request. Here's a possible solution, although I'm not sure jQuery permits loading the entire contents of the page like this:
ReplyDelete$.post(url, params, function(data) {
$(document).html(data);
}, "html");