Comment puis-je publier des données sous forme de données de formulaire au lieu d'une charge utile de demande?

Question

Dans le code ci-dessous, la méthode AngularJS $http appelle l'URL et soumet l'objet xsrf en tant que "Request Payload" (comme décrit dans l'onglet réseau du débogueur Chrome). La méthode jQuery $.ajax effectue le même appel, mais soumet xsrf en tant que "Données de formulaire".

Comment puis-je soumettre xsrf à AngularJS en tant que données de formulaire au lieu d'une charge utile de requête?

 var url = 'http://somewhere.com/';
var xsrf = {fkey: 'xsrf key'};

$http({
    method: 'POST',
    url: url,
    data: xsrf
}).success(function () {});

$.ajax({
    type: 'POST',
    url: url,
    data: xsrf,
    dataType: 'json',
    success: function() {}
});
 

Answer 1

La ligne suivante doit être ajoutée à l'objet http $ qui est passé:

 headers: {'Content-Type': 'application/x-www-form-urlencoded'}
 

Et les données transmises doivent être converties en une chaîne codée en URL:

 > $.param({fkey: "key"})
'fkey=key'
 

Donc, vous avez quelque chose comme:

 $http({
    method: 'POST',
    url: url,
    data: $.param({fkey: "key"}),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
 

De: https://groups.google.com/forum/#!msg/angular/5nAedJ1LyO0/4Vj_72EZcDsJ

Answer 2

Si vous ne voulez pas utiliser jQuery dans la solution, vous pouvez essayer cela. Solution obtenue à partir d'ici http://stackoverflow.com/a/1714899/1784301

 $http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
    data: xsrf
}).success(function () {});
 

Answer 3

La poursuite de la confusion autour de cette question qui m'a inspiré pour écrire un article de blog à ce sujet. La solution que je propose dans ce post, c'est mieux que votre top rated solution car elle ne vous limite pas à paramétrer votre objet de données pour $http appels de service; c'est à dire avec ma solution, vous pouvez simplement continuer à transmettre les données réelles des objets à $http.post(), etc. et encore obtenir le résultat souhaité.

Aussi, le top rated réponse s'appuie sur l'inclusion de la pleine jQuery dans la page pour l' $.param() de la fonction, alors que ma solution est jQuery agnostique, pur AngularJS prêt.

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

Espérons que cette aide.

Answer 4

J'ai pris quelques unes des autres réponses et j'ai fait quelque chose d'un peu plus propre, mettez cet appel .config() à la fin de votre angular.module dans votre app.js:

 .config(['$httpProvider', function ($httpProvider) {
  // Intercept POST requests, convert to standard form encoding
  $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  $httpProvider.defaults.transformRequest.unshift(function (data, headersGetter) {
    var key, result = [];
    for (key in data) {
      if (data.hasOwnProperty(key)) {
        result.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
      }
    }
    return result.join("&");
  });
}]);
 

Answer 5

Vous pouvez définir le comportement globalement:

 $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
 

Vous n'avez donc pas besoin de le redéfinir à chaque fois:

 $http.post("/handle/post", {
    foo: "FOO",
    bar: "BAR"
}).success(function (data, status, headers, config) {
    // TODO
}).error(function (data, status, headers, config) {
    // TODO
});