jQuery 发布请求（不是 AJAX）答案

【问题标题】：jQuery post request (not AJAX)jQuery 发布请求（不是 AJAX）
【发布时间】：2011-06-02 19:01:33
【问题描述】：

在一个 ASP.NET MVC 应用程序中，我使用 jQuery 在按钮单击时发布数据：

<button onclick="addProducts()">Add products</button>
....
$.post('<%= Url.Action("AddToCart", "Cart") %>',
            {
                ...
                returnUrl: window.location.href
            });

在“Cart”控制器的“AddToCart”操作中，我在发布后使用重定向到另一个视图：

    public RedirectToRouteResult AddToCart(..., string returnUrl)
    {
        ...
        return RedirectToAction("Index", new { returnUrl });            
    }

一切都好，除了这个重定向。发布后我留在同一页面上。我怀疑这是由于 AJAX 类型的“POST”请求。

如何解决 jQuery POST 请求阻塞重定向的问题？

【问题讨论】：

您是否尝试重定向到发起 Ajax 请求的同一页面？

标签： javascript jquery asp.net-mvc post

【解决方案1】：

我创建了一个$.form(url[, data[, method = 'POST']]) 函数，它创建一个隐藏表单，用指定的数据填充它并将其附加到<body>。以下是一些示例：

$.form('/index')

<form action="/index" method="POST"></form>

$.form('/new', { title: 'Hello World', body: 'Foo Bar' })

<form action="/index" method="POST">
    <input type="hidden" name="title" value="Hello World" />
    <input type="hidden" name="body" value="Foo Bar" />
</form>

$.form('/info', { userIds: [1, 2, 3, 4] }, 'GET')

<form action="/info" method="GET">
    <input type="hidden" name="userIds[]" value="1" />
    <input type="hidden" name="userIds[]" value="2" />
    <input type="hidden" name="userIds[]" value="3" />
    <input type="hidden" name="userIds[]" value="4" />
</form>

$.form('/profile', { sender: { first: 'John', last: 'Smith', postIds: null },
                     receiver: { first: 'Foo', last: 'Bar', postIds: [1, 2] } })

<form action="/profile" method="POST">
    <input type="hidden" name="sender[first]" value="John">
    <input type="hidden" name="sender[last]" value="Smith">
    <input type="hidden" name="receiver[first]" value="John">
    <input type="hidden" name="receiver[last]" value="Smith">
    <input type="hidden" name="receiver[postIds][]" value="1">
    <input type="hidden" name="receiver[postIds][]" value="2">
</form>

使用 jQuery 的 .submit() 方法，您可以使用简单的表达式创建和提交表单：

$.form('http://stackoverflow.com/search', { q: '[ajax]' }, 'GET').submit();

这是函数定义：

jQuery(function($) { $.extend({
    form: function(url, data, method) {
        if (method == null) method = 'POST';
        if (data == null) data = {};

        var form = $('<form>').attr({
            method: method,
            action: url
         }).css({
            display: 'none'
         });

        var addData = function(name, data) {
            if ($.isArray(data)) {
                for (var i = 0; i < data.length; i++) {
                    var value = data[i];
                    addData(name + '[]', value);
                }
            } else if (typeof data === 'object') {
                for (var key in data) {
                    if (data.hasOwnProperty(key)) {
                        addData(name + '[' + key + ']', data[key]);
                    }
                }
            } else if (data != null) {
                form.append($('<input>').attr({
                  type: 'hidden',
                  name: String(name),
                  value: String(data)
                }));
            }
        };

        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                addData(key, data[key]);
            }
        }

        return form.appendTo('body');
    }
}); });

【讨论】：

为什么不在 .submit() 之后调用 .remove() 以防止在多次调用该函数时出现多个隐藏表单？
@Samuel 嗯，我没有在可能发生的情况下使用它。通常，在提交后，用户会加载目标页面，这使得我在 DOM 中留下 <form> 无关紧要。我可以看到有一些种情况可能会出现这种情况，但一般来说可能不值得担心。
很好的解决方案，谢谢！如果你想在新窗口中发布它，你可以简单地做 $.form('/url', { data: data}).attr('target', '_blank').submit().remove();
这样的东西应该已经是 jQuery 的一部分了。 (+1)
这对我很有帮助，但我不得不做出改变，因为 null 被认为是一个对象并且正在发出额外的请求递归请求（并且永远不会在接近尾声时对 null 进行测试）。改为...} else if (data && typeof data === 'object') { for (var key in data) { if (data.hasOwnProperty(key)) { addData(name + '[' + key + ']', data[key]); } } } else { return ("<input type='hidden' name='"+name+"' value='"+data+"' />"); }

【解决方案2】：

$.post 是一个 AJAX 调用。

最好的办法是让按钮成为表单的触发器，然后使用 post 方法提交。

另一种方法是从服务器回显您的新网址，但这违背了 AJAX 的意义。

【讨论】：

【解决方案3】：

使用 jQuery.submit() 提交表单：http://api.jquery.com/submit/

【讨论】：

jQuery.submit() 方法无效

【解决方案4】：

您似乎正在尝试将产品添加到购物车，然后重定向到您当前的页面。我的猜测是，这就是您更新购物车视觉效果的方式。我建议在您的 $.post 上添加成功处理程序，然后重定向到当前页面。如果服务器发生错误，您可以将序列化的错误发回并在客户端处理。

function addProducts() {
    $.post('<%= Url.Action("AddToCart", "Cart") %>',{
        returnUrl: window.location.href
    }, function(data){
        window.location.href = window.location.href
    });
}

这将在您的产品发布后刷新您的当前页面。

这里有一个小提琴供参考：http://jsfiddle.net/brentmn/B4P6W/3/

【讨论】：

【解决方案5】：

如果您在发布后进行完全重定向，那么为什么要使用 Ajax？您应该能够在此处执行传统的 POST 并成功重定向。

如果您真的希望 ajax 请求通过并仍然重定向，那么一种非常简单且非侵入性的方法是从您的操作中返回 JavascriptResult 而不是 @ 987654322@:

return JavaScript("window.location = " + returnUrl);

【讨论】：