使用 jQuery（插件？）的非 ajax GET/POST答案

【问题标题】：Non-ajax GET/POST using jQuery (plugin?)使用 jQuery（插件？）的非 ajax GET/POST
【发布时间】：2010-11-12 01:50:23
【问题描述】：

这是我觉得我错过了在 Google 上找到答案的关键关键字的情况之一......

我有一袋参数，我想让浏览器导航到带有参数的 GET URL。作为一个 jQuery 用户，我知道如果我想发出一个 ajax 请求，我会这样做：

$.getJSON(url, params, fn_handle_result);

但有时我不想使用 ajax。我只是想提交参数并返回一个页面。

现在，我知道我可以循环参数并手动构造一个 GET URL。对于 POST，我可以动态创建一个表单，用字段填充它并提交。但我确信有人已经编写了一个可以做到这一点的插件。或者也许我错过了一些东西，你可以用核心 jQuery 来做。

那么，有人知道这样的插件吗？

编辑：基本上，我想要写的是：

$.goTo(url, params);

可选

$.goTo(url, params, "POST");

【问题讨论】：

标签： javascript jquery jquery-plugins

【解决方案1】：

这与上面类似，只是它将处理传递给 MVC 的 Array 参数

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

【讨论】：

++，但请注意（至少从 MVC 6 开始 - 不确定早期版本）您不需要使用索引修改 name 值 - 多个同名元素将做被识别为一个数组。此外，也许将$.isArray(value) 替换为value.length != null && value.length > 0 会使代码更具可读性。

【解决方案2】：

对于为 rails 3 执行 doPost 的任何人，仅供参考，您需要添加 CSRF 令牌，将以下内容添加到答案中应该可以...

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

【讨论】：

是的，某些其他服务器端技术（想到 Drupal 和 Django）也需要一些隐藏的与安全相关的字段。

【解决方案3】：

干得好！如果您想要一个不可见的表格，请将其放入隐藏的 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);

【讨论】：

是的，或者您可以将
设置为 display: none。但是，只有隐藏字段的表单不应显示任何内容 - 除了边距/填充（在某些浏览器中）可能有一点空白。

【解决方案4】：

这是我最终做的，使用 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);

用法：

$.doPost("/mail/send.php", {
    subject: "test email",
    body: "This is a test email sent with $.doPost"
});

欢迎任何反馈。

更新：请参阅dustin 对适用于 IE8 的版本的回答

【讨论】：

没有 $form.appendTo("body");它在 IE9 中不起作用。谢谢！我遇到了这个问题

【解决方案5】：

在我在 IE8 上尝试之前，jQuery 插件似乎工作得很好。我必须做些小改动才能让它在 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);

【讨论】：

非常好，但我对如何使用它在页面上发布另一个表单的输入值有点不知所措。最后，我将它与 blixt 的 stackoverflow.com/questions/1131630/… unparam 函数一起使用，如下所示： $.postGo('/my/post/handler', jQuery.unparam($('#myform').serialize()));
注意：Dustin 所指的 jQuery 插件是由 itsadok 提供的（见下文）。起初这让我很困惑。 ;-)
不错！此外，如果您想支持作为值传递的数组，那么您必须更新postGo 方法（getGo 已经可以正常工作）：在each 循环的function(name, value) { 内添加检查if (value instanceof Array)，如果值是数组-迭代它，将输入附加值values[i]。如果值不是数组 - 使用已经存在的代码。
@JamesMcCormack 如果您事先没有表格，此解决方案最有用。如果你已经有一个表格，那么大多数时候你可以.submit()它。使用serialize 然后unparam 有点迂回。

【解决方案6】：

接受的答案似乎没有涵盖您的 POST 要求，因为设置 document.location 将始终导致 GET 请求。这是一个可能的解决方案，虽然我不确定 jQuery 是否允许像这样加载页面的全部内容：

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

【讨论】：

我不是反对你的人。但是 .post 是 AJAX。他想要非 AJAX，所以它实际上会改变页面。

【解决方案7】：

从问题中不清楚您是否有一堆随机值要传递给查询字符串，或者它是表单值。

对于表单值，只需使用.serialize 函数来构造查询字符串。

例如

var qString = $('#formid').serialize();
document.location = 'someUrl' + '?' + serializedForm

如果你有一堆随机的值，你可以构造一个对象并使用.param 实用方法。

例如

 var params = { width:1680, height:1050 };
 var str = jQuery.param( params );
 console.log( str )
 // prints width=1680&height=1050
 // document.location = 'someUrl' + '?' + str

【讨论】：