jQuery发布请求(不是AJAX)

rem*_*rem 37 javascript asp.net-mvc jquery post

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

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

在"Cart"控制器的"AddToCart"操作中,我在发布后使​​用重定向到另一个View:

    public RedirectToRouteResult AddToCart(..., string returnUrl)
    {
        ...
        return RedirectToAction("Index", new { returnUrl });            
    }
Run Code Online (Sandbox Code Playgroud)

一切都没问题,除了这个重定向.发布后我留在同一页面上.我怀疑这是由于AJAX类型的"POST"请求.

如何用jQuery POST请求阻止重定向来解决问题?

小智 95

我创建了一个$.form(url[, data[, method = 'POST']])创建隐藏表单的函数,用指定的数据填充它并将其附加到<body>.这里有些例子:

$.form('/index')

<form action="/index" method="POST"></form>
Run Code Online (Sandbox Code Playgroud)
$.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>
Run Code Online (Sandbox Code Playgroud)
$.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>
Run Code Online (Sandbox Code Playgroud)
$.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>
Run Code Online (Sandbox Code Playgroud)

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

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

这是函数定义:

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');
    }
}); });
Run Code Online (Sandbox Code Playgroud)

  • 像这样的东西应该是jQuery的一部分.(1) (11认同)
  • 好的解决方案,谢谢!如果你想在一个新窗口中发布它,你可以简单地做$ .form('/ url',{data:data}).attr('target','_ _ glank').submit().remove(); (6认同)
  • @Samuel嗯,我没有在他们可能发生的情况下使用它.通常,在提交后,用户会加载目标页面,这与我在DOM中留下"<form>"无关.我可以看到有些*可能会出现这种情况,但总的来说可能不值得担心. (3认同)
  • 这对我很有帮助,但我不得不进行更改,因为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 +"'/>"); `} (3认同)

Hor*_*mir 9

$.post 是一个AJAX调用.

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

另一种方法是从服务器回显你的新网址,但是这会破坏AJAX的观点.


Vic*_*din 7

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