AngularJS-N'importe quel moyen pour $http.post pour envoyer des paramètres de requête au lieu de JSON?

si vous utilisez angulaire > = 1,4 , voici la solution la plus propre que j'ai trouvé qui ne repose sur rien de personnalisé ou externe:

angular.module('yourModule')
  .config(function ($httpProvider, $httpParamSerializerJQLikeProvider){
    $httpProvider.defaults.transformRequest.unshift($httpParamSerializerJQLikeProvider.$get());
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
});

Et alors vous pouvez le faire n'importe où dans votre application:

$http({
  method: 'POST',
  url: '/requesturl',
  data: {
    param1: 'value1',
    param2: 'value2'
  }
});

et il sérialisera correctement les données comme param1=value1&param2=value2 et l'enverra à /requesturl avec l'en-tête de type de contenu application/x-www-form-urlencoded; charset=utf-8 comme il est normalement prévu avec les requêtes POST sur les endpoints.

From AngularJS documentation:

params - {Object.} – Carte de chaînes ou d'objets qui sera transformé ?cle1=valeur1&cle2=valeur2 après l'url. si la la valeur n'est pas une chaîne , elle sera Jsonifiée.

ainsi, fournir chaîne comme paramètres. Si vous ne le voulez pas, utilisez les transformations. Encore une fois, à partir de la documentation:

pour outrepasser ces transformation localement, spécifier les fonctions de transformation comme les propriétés transformRequest et/ou transformResponse de la configuration objet. Pour outrepasser globalement les transformations par défaut, Outrepasser le $ httpProvider.défaut.transformRequest et $ httpProvider.défaut.propriétés de transformResponse de la $ httpProvider.

Consultez documentation pour plus de détails.

utilisez la fonction $.param de jQuery pour sérialiser les données JSON dans requestData.

en bref, en utilisant le même code que le vôtre:

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

pour utiliser ceci, vous devez inclure jQuery dans votre page avec AngularJS.

notez qu'à partir de L'angle 1.4, vous pouvez sérialiser les données du formulaire sans utiliser jQuery.

Dans l'app.js:

module.run(function($http, $httpParamSerializerJQLike) {
  $http.defaults.transformRequest.unshift($httpParamSerializerJQLike);
});

puis dans votre contrôleur:

$http({
    method: 'POST',
    url: myUrl',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: myData
});

cela pourrait être un peu un piratage, mais j'ai évité le problème et converti le JSON en post array de PHP du côté du serveur:

$_POST = json_decode(file_get_contents('php://input'), true);

j'ai aussi des problèmes avec la configuration de l'authentification http personnalisée parce que $resource cache la requête.

pour que cela fonctionne, vous devez écraser les en-têtes existants en faisant ceci

var transformRequest = function(data, headersGetter){
  var headers = headersGetter();
  headers['Authorization'] = 'WSSE profile="UsernameToken"';
  headers['X-WSSE'] = 'UsernameToken ' + nonce
  headers['Content-Type'] = 'application/json';
};

return $resource(
  url,
    {
    },
    {
      query: {
        method: 'POST',
        url: apiURL + '/profile',
        transformRequest: transformRequest,
        params: {userId: '@userId'}
      },
    }
);

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

Modifier les en-têtes par défaut:

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

puis utiliser la méthode $.param de JQuery:

var payload = $.param({key: value});
$http.post(targetURL, payload);

   .controller('pieChartController', ['$scope', '$http', '$httpParamSerializerJQLike', function($scope, $http, $httpParamSerializerJQLike) {
        var data = {
                TimeStamp : "2016-04-25 12:50:00"
        };
        $http({
            method: 'POST',
            url: 'serverutilizationreport',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            data: $httpParamSerializerJQLike(data),
        }).success(function () {});
    }
  ]);

ajustement rapide - pour ceux qui ont des problèmes avec la configuration globale de la fonction transformRequest, voici l'extrait que j'utilise pour me débarrasser de l'erreur Cannot read property 'jquery' of undefined :

$httpProvider.defaults.transformRequest = function(data) {
        return data != undefined ? $.param(data) : null;
    }

vous pouvez également résoudre ce problème sans changer de code dans le serveur, en changeant l'en-tête dans $http.post appeler et utiliser $_POST de la manière régulière. Expliqué ici: http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax /

j'ai trouvé plusieurs fois le comportement problématique de cet ensemble. Je l'ai utilisé depuis express (sans fautes de frappe) et le bodyParser (avec les fautes de frappe dt~body-parser).

Je n'ai pas essayé de télécharger un fichier, mais simplement d'interpréter un JSON donné dans une chaîne de caractères.

le request.body était simplement un json vide ( {} ).

après beaucoup d'enquête finalement cela a fonctionné pour moi:

import { json } from 'body-parser';
...
app.use(json()); <-- should be defined before the first POST handler!

It peut être aussi important de donner le type de contenu application/json dans la chaîne de requête du côté client.

syntaxe pour AngularJS v1.4.8 + (v1.5.0)

       $http.post(url, data, config)
            .then(
                    function (response) {
                        // success callback
                    },
                    function (response) {
                        // failure callback
                    }
            );

par exemple:

    var url = "http://example.com";

    var data = {
        "param1": "value1",
        "param2": "value2",
        "param3": "value3"
    };

    var config = {
        headers: {
            'Content-Type': "application/json"
        }
    };

    $http.post(url, data, config)
            .then(
                    function (response) {
                        // success callback
                    },
                    function (response) {
                        // failure callback
                    }
            );