AngularJs $ http.post () non invia dati

Qualcuno potrebbe dirmi perché la seguente dichiarazione non invia i dati di post all'URL designato? L'URL viene chiamato ma sul server quando stampo $ _POST - ottengo un array vuoto. Se stampo un messaggio nella console prima di aggiungerlo ai dati, mostra il contenuto corretto.

$http.post('request-url',  { 'message' : message });

Ho anche provato con i dati come stringa (con lo stesso risultato):

$http.post('request-url',  "message=" + message);

Sembra funzionare quando lo uso nel seguente formato:

$http({
    method: 'POST',
    url: 'request-url',
    data: "message=" + message,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});

ma c'è un modo per farlo con $ http.post () - e devo sempre includere l'intestazione affinché funzioni? Credo che il tipo di contenuto di cui sopra specifichi il formato dei dati inviati, ma posso inviarlo come oggetto javascript?

Ho avuto lo stesso problema usando asp.net MVC e ho trovato la soluzione qui

C'è molta confusione tra i nuovi arrivati ​​su AngularJS sul perché le $httpfunzioni di stenografia del servizio ( $http.post(), ecc.) Non sembrano essere scambiabili con gli equivalenti jQuery ( jQuery.post(), ecc.)

La differenza sta nel modo in cui jQuery e AngularJS serializzano e trasmettono i dati. Fondamentalmente, il problema risiede nel fatto che la lingua scelta dal server non è in grado di comprendere la trasmissione di AngularJS in modo nativo ... Per impostazione predefinita, jQuery trasmette i dati utilizzando

Content-Type: x-www-form-urlencoded

e la foo=bar&baz=moeserializzazione familiare .

AngularJS , tuttavia, trasmette i dati utilizzando

Content-Type: application/json 

e { "foo": "bar", "baz": "moe" }

La serializzazione JSON, che purtroppo alcune lingue del server Web, in particolare PHP, non serializza nativamente.

Funziona come un fascino.

CODICE

// Your app's root module...
angular.module('MyModule', [], function($httpProvider) {
  // Use x-www-form-urlencoded Content-Type
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

  /**
   * The workhorse; converts an object to x-www-form-urlencoded serialization.
   * @param {Object} obj
   * @return {String}
   */ 
  var param = function(obj) {
    var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

    for(name in obj) {
      value = obj[name];

      if(value instanceof Array) {
        for(i=0; i<value.length; ++i) {
          subValue = value[i];
          fullSubName = name + '[' + i + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value instanceof Object) {
        for(subName in value) {
          subValue = value[subName];
          fullSubName = name + '[' + subName + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value !== undefined && value !== null)
        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
    }

    return query.length ? query.substr(0, query.length - 1) : query;
  };

  // Override $http service's default transformRequest
  $httpProvider.defaults.transformRequest = [function(data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
  }];
});

Non è super chiaro sopra, ma se stai ricevendo la richiesta in PHP puoi usare:

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

Per accedere a un array in PHP da un POST di AngularJS.

Puoi impostare il "Tipo di contenuto" predefinito in questo modo:

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

Circa il dataformato:

I metodi $ http.post e $ http.put accettano qualsiasi valore di oggetto JavaScript (o stringa) come parametro di dati. Se i dati sono un oggetto JavaScript, per impostazione predefinita verranno convertiti in una stringa JSON.

Prova a usare questa variazione

function sendData($scope) {
    $http({
        url: 'request-url',
        method: "POST",
        data: { 'message' : message }
    })
    .then(function(response) {
            // success
    }, 
    function(response) { // optional
            // failed
    });
}

Ho avuto un problema simile e mi chiedo se anche questo può essere utile: https://stackoverflow.com/a/11443066

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

Saluti,

Mi piace usare una funzione per convertire oggetti in post parametri.

myobject = {'one':'1','two':'2','three':'3'}

Object.toparams = function ObjecttoParams(obj) {
    var p = [];
    for (var key in obj) {
        p.push(key + '=' + encodeURIComponent(obj[key]));
    }
    return p.join('&');
};

$http({
    method: 'POST',
    url: url,
    data: Object.toparams(myobject),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

Questo è stato finalmente risolto nell'angolare 1.4 usando $ httpParamSerializerJQLike

Vedi https://github.com/angular/angular.js/issues/6039

.controller('myCtrl', function($http, $httpParamSerializerJQLike) {
$http({
  method: 'POST',
  url: baseUrl,
  data: $httpParamSerializerJQLike({
    "user":{
      "email":"wahxxx@gmail.com",
      "password":"123456"
    }
  }),
  headers:
    'Content-Type': 'application/x-www-form-urlencoded'
})})

Uso jQuery param con AngularJS post requrest. Ecco un esempio ... crea il modulo dell'applicazione AngularJS, dove myappè definito ng-appnel tuo codice HTML.

var app = angular.module('myapp', []);

Ora creiamo un controller di accesso, e-mail e password POST.

app.controller('LoginController', ['$scope', '$http', function ($scope, $http) {
    // default post header
    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
    // send login data
    $http({
        method: 'POST',
        url: 'https://example.com/user/login',
        data: $.param({
            email: $scope.email,
            password: $scope.password
        }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function (data, status, headers, config) {
        // handle success things
    }).error(function (data, status, headers, config) {
        // handle error things
    });
}]);

Non mi piace scusare il codice, è abbastanza semplice da capire :) Nota che paramproviene da jQuery, quindi devi installare sia jQuery che AngularJS per farlo funzionare. Ecco uno screenshot.

Spero sia utile. Grazie!

Ho avuto lo stesso problema con AngularJS e Node.js + Express 4 + Router

Il router si aspetta i dati dalla richiesta della posta nel corpo. Questo corpo era sempre vuoto se seguissi l'esempio di Angular Docs

Notazione 1

$http.post('/someUrl', {msg:'hello word!'})

Ma se l'ho usato nei dati

Notazione 2

$http({
       withCredentials: false,
       method: 'post',
       url: yourUrl,
       headers: {'Content-Type': 'application/x-www-form-urlencoded'},
       data: postData
 });

Modifica 1:

Altrimenti il ​​router node.js si aspetterà i dati in req.body se usato notazione 1:

req.body.msg

Che invia anche le informazioni come payload JSON. Questo è meglio in alcuni casi in cui hai array nel tuo json e x-www-form-urlencoded darà alcuni problemi.

ha funzionato. Spero che sia d'aiuto.

A differenza di JQuery e per motivi di pedanteria, Angular utilizza il formato JSON per il trasferimento di dati POST da un client al server (JQuery applica presumibilmente il codice x-www-urlencoded, sebbene JQuery e Angular utilizzino JSON per l'immissione dei dati). Pertanto ci sono due parti del problema: nella parte client js e nella parte server. Quindi hai bisogno di:

1. metti la parte client js Angular in questo modo:

   $http({
   method: 'POST',
   url: 'request-url',
   data: {'message': 'Hello world'}
   });

E

2. scrivere nella parte del server per ricevere dati da un client (se è php).

           $data               = file_get_contents("php://input");
           $dataJsonDecode     = json_decode($data);
           $message            = $dataJsonDecode->message;
           echo $message;     //'Hello world'

Nota: $ _POST non funzionerà!

La soluzione funziona bene per me, si spera, e per te.

Per inviare dati tramite il metodo Post con $httpangularjs è necessario modificare

data: "message=" + message, con data: $.param({message:message})

Per costruire sulla risposta di @ felipe-miosso:

1. Scaricalo come modulo AngularJS da qui ,
2. Installalo

3. Aggiungilo alla tua applicazione:

   var app = angular.module('my_app', [ ... , 'httpPostFix']);

Non ho la reputazione di commentare, ma in risposta / aggiunta alla risposta di Don F:

$params = json_decode(file_get_contents('php://input'));

È truenecessario aggiungere un secondo parametro alla json_decodefunzione per restituire correttamente un array associativo:

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

Angolare

  var payload = $.param({ jobId: 2 });

                this.$http({
                    method: 'POST',
                    url: 'web/api/ResourceAction/processfile',
                    data: payload,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                });

WebAPI 2

public class AcceptJobParams
        {
            public int jobId { get; set; }
        }

        public IHttpActionResult ProcessFile([FromBody]AcceptJobParams thing)
        {
            // do something with fileName parameter

            return Ok();
        }

Questo codice ha risolto il problema per me. È una soluzione a livello di applicazione:

moduleName.config(['$httpProvider',
  function($httpProvider) {
    $httpProvider.defaults.transformRequest.push(function(data) {
        var requestStr;
        if (data) {
            data = JSON.parse(data);
            for (var key in data) {
                if (requestStr) {
                    requestStr += "&" + key + "=" + data[key];
                } else {
                    requestStr = key + "=" + data[key];
                }
            }
        }
        return requestStr;
    });
    $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  }
]);

Aggiungi questo nel tuo file js:

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

e aggiungilo al tuo file server:

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

Dovrebbe funzionare.

Ho anche affrontato un problema simile e stavo facendo qualcosa del genere e non ha funzionato. Il mio controller Spring non è stato in grado di leggere il parametro dati.

var paramsVal={data:'"id":"1"'};
  $http.post("Request URL",  {params: paramsVal});  

Ma leggendo questo forum e API Doc, ho provato a seguire la strada e ha funzionato per me. Se anche qualcuno ha un problema simile, puoi provare anche qui sotto.

$http({
      method: 'POST',
      url: "Request URL",           
      params: paramsVal,
      headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
            });

Controlla https://docs.angularjs.org/api/ng/service/ $ http # post per cosa fa param config. {data: '"id": "1"'} - Mappa di stringhe o oggetti che verranno trasformati in URL? data = "id: 1"

questa è probabilmente una risposta tardiva, ma penso che il modo più corretto sia usare lo stesso uso angolare del codice quando si fa una richiesta "get" usando si $httpParamSerializerdovrà iniettarla nel controller in modo da poter semplicemente fare quanto segue senza dover usa Jquery, $http.post(url,$httpParamSerializer({param:val}))

app.controller('ctrl',function($scope,$http,$httpParamSerializer){
    $http.post(url,$httpParamSerializer({param:val,secondParam:secondVal}));
}

Nel mio caso risolvo il problema in questo modo:

var deferred = $q.defer();

$http({
    method: 'POST',
    url: 'myUri', 
    data: $.param({ param1: 'blablabla', param2: JSON.stringify(objJSON) }),
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(
    function(res) {
        console.log('succes !', res.data);
        deferred.resolve(res.data);
    },
    function(err) {
        console.log('error...', err);
        deferred.resolve(err);
    }
);
return deferred.promise;

È necessario utilizzare JSON.stringify per ogni parametro contenente un oggetto JSON, quindi creare l'oggetto dati con "$ .param" :-)

NB: Il mio "objJSON" è un oggetto JSON contenente array, numero intero, stringa e contenuto html. La sua dimensione totale è> 3500 caratteri.

So che ha accettato risposta. Ma seguire potrebbe aiutare i futuri lettori, se la risposta non è adatta a loro per nessun motivo.

Angular non funziona come jQuery. Mentre provavo a seguire la guida per modificare l'angolazione $httpprovider, ho riscontrato altri problemi. Ad esempio, utilizzo codeigniter in cui$this->input->is_ajax_request() funzione ha sempre fallito (che è stata scritta da un altro programmatore e utilizzata a livello globale, quindi non posso cambiare) dicendo che non era una vera richiesta Ajax.

Per risolverlo, ho preso l'aiuto della promessa differita . L'ho provato su Firefox e ie9 e ha funzionato.

Ho la seguente funzione definita al di fuori di qualsiasi codice angolare. Questa funzione effettua una normale chiamata jacquery ajax e restituisce oggetto differito / promessa (sto ancora imparando).

function getjQueryAjax(url, obj){
    return $.ajax({
        type: 'post',
        url: url,
        cache: true,
        data: obj
    });
}

Quindi lo chiamo codice angolare usando il seguente codice. Si prega di notare che dobbiamo aggiornare $scopemanualmente utilizzando $scope.$apply().

    var data = {
        media: "video",
        scope: "movies"
    };
    var rPromise = getjQueryAjax("myController/getMeTypes" , data);
    rPromise.success(function(response){
        console.log(response);
        $scope.$apply(function(){
            $scope.testData = JSON.parse(response);
            console.log($scope.testData);
        });
    }).error(function(){
        console.log("AJAX failed!");
    });

Questa potrebbe non essere la risposta perfetta, ma mi ha permesso di usare le chiamate jquery ajax con angolare e mi ha permesso di aggiornare il $scope.

Ho avuto lo stesso problema in express .. per risolvere devi usare bodyparser per analizzare gli oggetti json prima di inviare richieste http ..

app.use(bodyParser.json());

Sto usando i servizi web asp.net WCF con js angolare e sotto il codice ha funzionato:

 $http({
        contentType: "application/json; charset=utf-8",//required
        method: "POST",
        url: '../../operation/Service.svc/user_forget',
        dataType: "json",//optional
        data:{ "uid_or_phone": $scope.forgettel, "user_email": $scope.forgetemail },
        async: "isAsync"//optional

       }).success( function (response) {

         $scope.userforgeterror = response.d;                    
       })

Spero che sia d'aiuto.

Non ho trovato uno snippet di codice completo su come utilizzare il metodo $ http.post per inviare dati al server e perché non funzionava in questo caso.

Spiegazioni dello snippet di codice seguente ...

1. Sto usando la funzione jQuery $ .param per serializzare i dati JSON su www post

2. Impostazione del Content-Type nella variabile di configurazione che verrà passata insieme alla richiesta di angularJS $ http.post che indica al server che stiamo inviando i dati nel formato di posta www.

3. Si noti il ​​metodo $ htttp.post, in cui sto inviando il 1o parametro come url, il 2o parametro come dati (serializzato) e il 3o parametro come config.

Il codice rimanente è comprensibile.

$scope.SendData = function () {
           // use $.param jQuery function to serialize data from JSON 
            var data = $.param({
                fName: $scope.firstName,
                lName: $scope.lastName
            });

            var config = {
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                }
            }

            $http.post('/ServerRequest/PostDataResponse', data, config)
            .success(function (data, status, headers, config) {
                $scope.PostDataResponse = data;
            })
            .error(function (data, status, header, config) {
                $scope.ResponseDetails = "Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + header +
                    "<hr />config: " + config;
            });
        };

Guarda l'esempio di codice del metodo $ http.post qui .

Se usi PHP questo è un modo semplice per accedere a un array in PHP da un POST di AngularJS.

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

Se si utilizza Angular> = 1.4 , ecco la soluzione più pulita utilizzando il serializzatore fornito da Angular :

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

E poi puoi semplicemente farlo ovunque nella tua app:

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

E serializzerà correttamente i dati come param1=value1&param2=value2e li invierà /requesturlcon l' application/x-www-form-urlencoded; charset=utf-8intestazione Content-Type come normalmente previsto con le richieste POST sugli endpoint.

TL; DR

Durante la mia ricerca ho scoperto che la risposta a questo problema ha molti gusti diversi; alcuni sono molto contorti e dipendono da funzioni personalizzate, alcuni dipendono da jQuery e altri sono incompleti nel suggerire che è necessario solo impostare l'intestazione.

Se hai appena impostato l' Content-Typeintestazione, il punto finale vedrà i dati POST, ma non sarà nel formato standard perché a meno che tu non fornisca una stringa comedata o serializzi manualmente il tuo oggetto dati, sarà tutto serializzato come JSON da impostazione predefinita e può essere interpretata in modo errato nell'endpoint.

ad es. se nell'esempio sopra non è stato impostato il serializzatore corretto, nell'endpoint verrebbe visualizzato come:

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

E ciò può portare ad analisi impreviste, ad es. ASP.NET lo tratta come un nullnome di parametro, con {"param1":"value1","param2":"value2"}come valore; o Fiddler lo interpreta nell'altro modo, con {"param1":"value1","param2":"value2"}come nome del parametro e nullcome valore.

Simile al formato di lavoro suggerito dall'OP e alla risposta di Denison, tranne che per l'uso $http.postinvece di just $httped è ancora dipendente da jQuery.

La cosa buona dell'uso di jQuery qui è che gli oggetti complessi vengono passati correttamente; contro la conversione manuale in parametri URL che potrebbero alterare i dati.

$http.post( 'request-url', jQuery.param( { 'message': message } ), {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});

Quando ho avuto questo problema, il parametro che stavo postando si è rivelato essere una matrice di oggetti anziché un semplice oggetto.

Appena aggiornato dalla versione 1.2 alla 1.3, ho riscontrato un problema nel codice. Trasformare una risorsa porterà a un ciclo infinito perché (penso) della $ promessa che trattiene di nuovo lo stesso oggetto. Forse aiuterà qualcuno ...

Potrei risolverlo con:

[...]
  /**
 * The workhorse; converts an object to x-www-form-urlencoded serialization.
 * @param {Object} obj
 * @return {String}
 */
var param = function (obj) {
var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

angular.forEach(obj, function(value, name) {
+    if(name.indexOf("$promise") != -1) {
+        return;
+    }

    value = obj[name];
    if (value instanceof Array) {
        for (i = 0; i < value.length; ++i) {
[...]

Sto usando il codice della risposta accettata (il codice di Felipe) per un po 'e ha funzionato alla grande (grazie, Felipe!).

Tuttavia, recentemente ho scoperto che ha problemi con oggetti o matrici vuoti. Ad esempio, quando si invia questo oggetto:

{
    A: 1,
    B: {
        a: [ ],
    },
    C: [ ],
    D: "2"
}

PHP non sembra affatto vedere B e C. Ottiene questo:

[
    "A" => "1",
    "B" => "2"
]

Uno sguardo alla richiesta effettiva in Chrome mostra questo:

A: 1
:
D: 2

Ho scritto uno snippet di codice alternativo. Sembra funzionare bene con i miei casi d'uso, ma non l'ho testato ampiamente quindi usalo con cautela.

Ho usato TypeScript perché mi piace digitare forte ma sarebbe facile da convertire in JS puro:

angular.module("MyModule").config([ "$httpProvider", function($httpProvider: ng.IHttpProvider) {
    // Use x-www-form-urlencoded Content-Type
    $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";

    function phpize(obj: Object | any[], depth: number = 1): string[] {
        var arr: string[] = [ ];
        angular.forEach(obj, (value: any, key: string) => {
            if (angular.isObject(value) || angular.isArray(value)) {
                var arrInner: string[] = phpize(value, depth + 1);
                var tmpKey: string;
                var encodedKey = encodeURIComponent(key);
                if (depth == 1) tmpKey = encodedKey;
                else tmpKey = `[${encodedKey}]`;
                if (arrInner.length == 0) {
                    arr.push(`${tmpKey}=`);
                }
                else {
                    arr = arr.concat(arrInner.map(inner => `${tmpKey}${inner}`));
                }
            }
            else {
                var encodedKey = encodeURIComponent(key);
                var encodedValue;
                if (angular.isUndefined(value) || value === null) encodedValue = "";
                else encodedValue = encodeURIComponent(value);

                if (depth == 1) {
                    arr.push(`${encodedKey}=${encodedValue}`);
                }
                else {
                    arr.push(`[${encodedKey}]=${encodedValue}`);
                }
            }
        });
        return arr;
    }

    // Override $http service's default transformRequest
    (<any>$httpProvider.defaults).transformRequest = [ function(data: any) {
        if (!angular.isObject(data) || data.toString() == "[object File]") return data;
        return phpize(data).join("&");
    } ];
} ]);

È meno efficiente del codice di Felipe ma non credo che importi molto poiché dovrebbe essere immediato rispetto al sovraccarico generale della richiesta HTTP stessa.

Ora PHP mostra:

[
    "A" => "1",
    "B" => [
        "a" => ""
    ],
    "C" => "",
    "D" => "2"
]

Per quanto ne so non è possibile far riconoscere a PHP che Ba e C sono array vuoti, ma almeno compaiono le chiavi, il che è importante quando c'è un codice che si basa su una certa struttura anche quando è essenzialmente vuoto all'interno.

Si noti inoltre che converte s indefiniti e null in stringhe vuote.

Inserisci i dati che desideri inviare come secondo parametro:

$http.post('request-url',  message);

Un'altra forma che funziona anche è:

$http.post('request-url',  { params: { paramName: value } });

Assicurati che paramName corrisponda esattamente al nome del parametro della funzione che si sta chiamando.

Fonte: metodo post scorciatoia AngularJS

Ho risolto questo con i codici seguenti:

Lato client (Js):

     $http({
                url: me.serverPath,
                method: 'POST',
                data: data,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            }).
                success(function (serverData) {
                    console.log("ServerData:", serverData);
    ......

notare che i dati sono un oggetto.

Sul server (ASP.NET MVC):

[AllowCrossSiteJson]
        public string Api()
        {
            var data = JsonConvert.DeserializeObject<AgentRequest>(Request.Form[0]);
            if (data == null) return "Null Request";
            var bl = Page.Bl = new Core(this);

            return data.methodName;
        }

e 'AllowCrossSiteJsonAttribute' è necessario per le richieste tra domini:

public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
            base.OnActionExecuting(filterContext);
        }
    }

Spero sia stato utile.