Alex Rivera | Logout

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

Asked 2009-07-19T08:10:28.650
35

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

2 Answers

51

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);
answered 2009-12-09T19:39:27.100
0

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);
answered 2010-07-29T14:49:07.563

Your Answer