jQuery пост-запрос (не AJAX) - PullRequest
Новая
       9

jQuery пост-запрос (не AJAX)

36 голосов
/ 03 января 2011

В приложении ASP.NET MVC я использую jQuery для публикации данных по нажатию кнопки: 

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

В действии «AddToCart» контроллера «Корзина» я использую перенаправление на другой вид после публикации:

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

Все в порядке, кроме перенаправления.Я остаюсь на той же странице после публикации.Я подозреваю, что это из-за AJAX-типа запроса "POST".

Как решить проблему с JQuery POST-запросом, блокирующим перенаправление?

Ответы [ 5 ]

93 голосов
/ 27 ноября 2011

Я создал функцию $.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');
    }
}); });
9 голосов
/ 03 января 2011

$.post - это вызов AJAX.

Лучше всего сделать кнопку триггером для формы и просто отправить ее, используя метод post.

Альтернативой может бытьэхо вашего нового URL с сервера, но это побеждает точку AJAX.

7 голосов
/ 03 января 2011

Используйте jQuery.submit () для отправки формы: http://api.jquery.com/submit/

3 голосов
/ 25 января 2012

Похоже, вы пытаетесь добавить товары в корзину, а затем перенаправить на свою текущую страницу.Я предполагаю, что именно так вы обновляете визуальный эффект своей корзины.Я бы предложил добавить обработчик успеха на ваш $ .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/

1 голос
/ 26 января 2012

Если вы делаете полный редирект после поста, то зачем делать это с Ajax?Вы должны быть в состоянии выполнить традиционный POST здесь и успешно его перенаправить.

Если вы действительно хотите, чтобы запрос ajax прошел и все еще перенаправлял, очень простой и ненавязчивый способдля этого нужно будет вернуть JavascriptResult из вашего действия вместо RedirectResult: 

return JavaScript("window.location = " + returnUrl);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...