28 votes

jQuery post request (pas Ajax)

Dans une application ASP.NET MVC, j'utilise jQuery pour publier des données sur Buttonclick

 <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û au type Ajax de demande "Post".

Comment résoudre le problème avec la requête post jQuery bloquant la redirection?

67voto

Jeremy Banks Points 32470

J'ai créé un $.form(url[, data[, method = 'POST']]) fonction qui crée une forme cachée, le remplit avec les données spécifiées et qu'il attache à l' <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 jQuery .submit() méthode, vous pouvez créer et soumettre un formulaire avec un simple expression:

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

9voto

Horia Dragomir Points 2122

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

7voto

Victor Haydin Points 2311

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

2voto

Brent Anderson Points 866

Il semble que vous essayez d'Ajouter des Produits au panier et ensuite rediriger vers votre page en cours. Ma conjecture est que est que est comment vous mettez à jour l'effet visuel de votre panier. Je suggère d'ajouter le gestionnaire de succès sur votre $.poste et puis redirection vers la page en cours. Si une erreur se produit sur le serveur, vous pouvez renvoyer les sérialisé d'erreur et de les traiter de côté client.

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

Cela actualiser votre page en cours après que vos produits sont affichés.

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

1voto

DMac the Destroyer Points 1673

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

Si vous voulez vraiment qu'une requête ajax soit traitée et toujours redirigée, une manière très simple et non intrusive de le faire serait de renvoyer un JavascriptResult de votre action au lieu d'un RedirectResult :

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X