web-dev-qa-db-fra.com

jQuery post request (pas AJAX)

Dans une application ASP.NET MVC, j'utilise jQuery pour publier des données en cliquant sur le bouton:

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

Dans l'action "AddToCart" du contrôleur "Cart", j'utilise la redirection vers une autre vue après la publication:

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

Tout va bien, sauf cette redirection. Je reste sur la même page après avoir posté. Je soupçonne que c'est dû à AJAX type de requête "POST".

Comment résoudre le problème avec jQuery POST demande de blocage de la redirection?

javascriptjqueryasp.net-mvcpost
37
rem

J'ai créé une fonction $.form(url[, data[, method = 'POST']]) qui crée un formulaire caché, le remplit avec les données spécifiées et le joint au <body>. Voici quelques exemples:

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

Avec la méthode .submit() de jQuery, vous pouvez créer et soumettre un formulaire avec une expression simple:

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

Voici la définition de la fonction:

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

$.post est un appel AJAX.

Votre meilleur pari est de faire du bouton un déclencheur pour un formulaire et de le soumettre en utilisant la méthode de publication.

Une alternative serait de faire écho à votre nouvelle URL depuis le serveur, mais cela vainc le point d'AJAX.

9
Horia Dragomir

Utilisez jQuery.submit () pour soumettre le formulaire: http://api.jquery.com/submit/

7
Victor Haydin

Il semble que vous essayez d'ajouter des produits au panier, puis de rediriger vers votre page actuelle. Je suppose que c'est ainsi que vous mettez à jour l'effet visuel de votre panier. Je suggère d'ajouter le gestionnaire de réussite sur votre $ .post, puis de le rediriger vers la page actuelle. Si une erreur se produit sur le serveur, vous pouvez renvoyer l'erreur sérialisée et la gérer côté client.

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

Cela actualisera votre page actuelle après la publication de vos produits.

Voici un violon pour référence: http://jsfiddle.net/brentmn/B4P6W/3/

3
Brent Anderson

Si vous faites une redirection complète après un post, alors pourquoi le faire avec Ajax? Vous devriez pouvoir effectuer un tradtional POST ici et le faire rediriger avec succès.

Si vous vraiment voulez qu'une requête ajax passe et continue à rediriger, un moyen très simple et non intrusif de le faire serait de renvoyer un JavascriptResult de votre action au lieu d'un RedirectResult:

return JavaScript("window.location = " + returnUrl);
1
DMac the Destroyer