Javascript jQuery post请求（非AJAX）

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

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

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

---

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

$。POST

是一个AJAX调用

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

另一种方法是从服务器回显您的新url，但这不符合AJAX的要点。

使用jQuery.submit（）提交表单：

我创建了一个

$.form（url[，data[，method='POST']]）

函数，该函数创建一个隐藏表单，用指定数据填充它并将其附加到

。以下是一些例子：

$.form('/index')

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

以下是函数定义：

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

jQuery（函数（$）{$.extend({
形式：函数（url、数据、方法）{
如果（method==null）method='POST'；
if（data==null）data={}；
变量形式=$（''）.attr({
方法:方法,，
操作：url
}).css({
显示：“无”
});
var addData=函数（名称、数据）{
如果（$.isArray（数据））{
对于（变量i=0；i

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

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

函数addProducts（）{
$.post（“”{
returnUrl:window.location.href
}，函数（数据）{
window.location.href=window.location.href
});
}

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

---

这里有一个供参考的小提琴：

如果你在一篇文章后进行完全重定向，那么为什么要使用Ajax呢？你应该能够执行一个传统的职位在这里，并有它成功地重定向

如果您确实希望ajax请求通过并仍然重定向，一种非常简单且非侵入性的方法是从您的操作返回

JavascriptResult

，而不是

重定向结果

：

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

---

您是否正在尝试重定向到启动Ajax请求的同一页面？为什么不在.submit（）之后调用.remove（），以防止在多次调用函数时出现多个隐藏表单？@Samuel-Hmm，我没有在可能出现这些表单的情况下使用此方法。通常，在提交后，用户会加载目标页面，这使得我在DOM中留下了一个

，这与此无关。我可以看到，在某些情况下可能会出现这种情况，但一般来说，这可能不值得担心。很好的解决方案，谢谢！如果要在新窗口中发布，只需执行$.form（'/url'，{data:data}）.attr（'target'，'u 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（“”；

}

jQuery submit

不是有效的方法

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

$.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');
    }
}); });

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

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