Non-ajax GET/POST using jQuery (plugin?)

Question

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");

Answer 1

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.

For 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

Answer 2

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:

$.post(url, params, function(data) {
  $(document).html(data);
}, "html");

Answer 3

Here's what I ended up doing, using the tip from redsquare:

(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

Answer 4

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.

Answer 5

Thanks you very much for this function itsadok, and i totally agree with Sep.

Answer 6

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:

(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);

Answer 7

Good job itsadok! If you want a invisible form put it into hidden DIV:

(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);