AngularJS - n’importe quel moyen pour $http.post d’envoyer des paramètres de la demande au lieu de JSON ?

Question

J'ai quelques vieux code qui effectue une requête AJAX requête POST via jQuery méthode post et ressemble à quelque chose comme ceci:

$.post("/foo/bar", requestData,
    function(responseData)
    {
        //do stuff with response
    }

requestData est juste un objet javascript avec les propriétés de la chaîne.

Je suis dans le processus de déplacement de nos trucs pour utiliser Angulaire, et je veux remplacer cet appel à $http.post. Je suis venu avec les éléments suivants:

$http.post("/foo/bar", requestData).success(
    function(responseData) {
        //do stuff with response
    }
});

Quand j'ai fait cela, j'ai eu une erreur 500 du serveur. À l'aide de Firebug, j'ai trouvé que cela envoie le corps de la requête comme ceci:

{"param1":"value1","param2":"value2","param3":"value3"}

Le succès de jQuery $.post envoie le corps comme ceci:

param1=value1&param2=value2&param3=value3

Le point de terminaison je suis frapper attend les paramètres de la demande et pas de JSON. Donc, ma question est est-il de toute façon de raconter $http.post envoyer jusqu'à l'objet javascript en tant que paramètres de la requête au lieu de JSON? Oui, je sais que je pourrais construire la chaîne de moi-même à partir de l'objet, mais je veux savoir si Angulaire offre quelque chose pour ce sortir de la boîte.

Answer 1

Je pense que l' params config paramètre ne fonctionne pas ici, car il ajoute la chaîne de l'url à la place du corps, mais à ajouter à ce que Infeligo proposé ici est un exemple de la mondial de remplacer une valeur par défaut de transformation (à l'aide de jQuery param comme un exemple pour convertir les données en param string).

Globaux d'transformRequest fonction:

var app = angular.module('myApp');

app.config(function ($httpProvider) {
    $httpProvider.defaults.transformRequest = function(data){
        if (data === undefined) {
            return data;
        }
        return $.param(data);
    }
});

De cette façon, tous les appels à $http.poste de transformer automatiquement le corps à la même param format utilisé par le jQuery $.post appel.

Remarque vous pouvez également définir le Type de Contenu d'en-tête par appel ou à l'échelle mondiale comme ceci:

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

Exemple de non-global transformRequest par appel:

    var transform = function(data){
        return $.param(data);
    }

    $http.post("/foo/bar", requestData, {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        transformRequest: transform
    }).success(function(responseData) {
        //do stuff with response
    });

Answer 2

De AngularJS documentation:

params – {Objet.} – Carte de chaînes ou d'objets qui sera transformé ?cle1=valeur1&cle2=valeur2 après l'url. Si l' la valeur n'est pas une chaîne, il sera JSONified.

Donc, fournir de la chaîne en tant que paramètres. Si vous ne voulez pas qu', puis utiliser des transformations. Encore une fois, à partir de la documentation:

Pour remplacer ces transformation localement, spécifiez transformer les fonctions comme transformRequest et/ou transformResponse propriétés de la config objet. À l'échelle mondiale remplacer la valeur par défaut transforme, remplacer la $httpProvider.les valeurs par défaut.transformRequest et $httpProvider.les valeurs par défaut.transformResponse propriétés de la $httpProvider.

Reportez-vous à la documentation pour plus de détails.

Answer 3

Utilisation de jQuery `` fonction pour sérialiser les données JSON dans requestData.

En bref, en utilisant un code similaire que la vôtre :

Pour utiliser cette, vous devez inclure jQuery dans votre page avec AngularJS.

Answer 4

J’ai des problèmes aussi bien avec l’authentification http personnalisée réglage car $resource cache la demande.

Pour que cela fonctionne, il faut écraser les en-têtes existants en faisant cela

J’espère que j’ai pu aider quelqu'un. Il m’a fallu 3 jours pour comprendre celui-ci.

Answer 5

C’est peut-être un peu d’un hack, mais j’ai évité la question et converti le json dans tableau POST de PHP côté serveur :