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

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 2

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 3

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 4

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...

var token = $('meta[name="csrf-token"]').attr('content');
$("<input name='authenticity_token' type='hidden' value='" + token + "'/>").appendTo($form);

Answer 5

This is similar to the above except it will handle Array parameters being passed to MVC

(function($) {
    $.extend({
        getGo: function(url, params, traditional) {
            /// <summary>
            ///     Perform a GET at url with specified params passed as part of the query string.
            /// </summary>
            /// <param name="url"></param>
            /// <param name="params"></param>
            /// <param name="traditional">Boolean:  Specify true for traditional serialization.</param>
            document.location = url + '?' + $.param(params, traditional);
        },
        postGo: function (url, params) {
            /// <summary>
            ///     Perform a POST at url with the specified params as part of a form object.
            ///     If a parameter is an array then it will submit it as multiple attributes so MVC will see it as an array
            /// </summary>
            /// <param name="url" type="string"></param>
            /// <param name="params" type="Object"></param>
            var $form = $("<form>").attr("method", "post").attr("action", url);
            $.each(params, function (name, value) {
                if (value.length != null && value.length > 0) {
                    for (var i = 0; i < value.length; i++) {
                        $("<input type='hidden'>").attr("name", name + '[' + i + ']').attr("value", value[i]).appendTo($form);
                    }
                }
                else {
                    $("<input type='hidden'>").attr("name", name).attr("value", value).appendTo($form);
                }
            });
            $form.appendTo("body");
            $form.submit();
        }
    });
})(jQuery);

Answer 6

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

Answer 7

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