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 br

Answer 1

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

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 4

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 5

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