AngularJs $ http.post () sendet keine Daten


Answers

Es ist nicht super klar oben, aber wenn Sie die Anfrage in PHP erhalten, können Sie verwenden:

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

Um von einem AngularJS POST auf ein Array in PHP zuzugreifen.

Question

Kann mir jemand sagen, warum die folgende Anweisung die Postdaten nicht an die angegebene URL sendet? Die URL wird aber auf dem Server aufgerufen, wenn ich $ _POST drucke - ich bekomme ein leeres Array. Wenn ich die Nachricht in der Konsole vor dem Hinzufügen zu den Daten drucke, wird der richtige Inhalt angezeigt.

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

Ich habe es auch mit den Daten als String versucht (mit gleichem Ergebnis):

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

Es scheint zu funktionieren, wenn ich es im folgenden Format verwende:

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

aber gibt es einen Weg, es mit dem $ http.post () zu tun - und muss ich immer den Header einschließen, damit es funktioniert? Ich glaube, dass der obige Inhaltstyp das Format der gesendeten Daten angibt, aber kann ich es als Javascript-Objekt senden?




Es wurde kein vollständiges Code-Snippet gefunden, in dem beschrieben wird, wie die $ http.post-Methode zum Senden von Daten an den Server verwendet wird und warum sie in diesem Fall nicht funktioniert.

Erläuterungen zum unten stehenden Code-Snippet ...

  1. Ich benutze jQuery $ .param Funktion, um die JSON-Daten zu www Post-Daten zu serialisieren
  2. Festlegen des Inhaltstyps in der Konfigurationsvariablen, die zusammen mit der Anfrage von angularJS $ http.post übergeben wird, die den Server anweist, dass wir Daten im WWW-Postformat senden.

  3. Beachten Sie die Methode $ htttp.post, in der ich den ersten Parameter als URL, den zweiten Parameter als Daten (serialisiert) und den dritten Parameter als Konfiguration sende.

Verbleibender Code ist selbst verständlich.

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

Sehen Sie sich das Codebeispiel der $ http.post-Methode hier an .




Ich weiß, hat die Antwort akzeptiert . Aber Folgendes könnte zukünftigen Lesern helfen, wenn die Antwort aus irgendeinem Grund ihnen nicht passt.

Angular tut Ajax nicht wie jQuery. Während ich versuchte, dem Handbuch zu folgen, um angular $httpprovider zu ändern, stieß ich auf andere Probleme. ZB verwende ich codeigniter, in dem $this->input->is_ajax_request() -Funktion immer fehlgeschlagen ist (die von einem anderen Programmierer geschrieben wurde und global verwendet wird, also nicht ändern kann) und sagt, dies sei keine echte Ajax-Anfrage.

Um es zu lösen, nahm ich Hilfe von verzögerten Versprechen . Ich habe es in Firefox und ie9 getestet und es hat funktioniert.

Ich habe folgende Funktion außerhalb eines beliebigen Winkelcodes definiert. Diese Funktion macht einen regelmäßigen JQuery-Ajax-Aufruf und gibt das verzögerte / Versprechen-Objekt (ich lerne noch) zurück.

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

Dann nenne ich es Winkelcode mit dem folgenden Code. Bitte beachten Sie, dass wir den $scope manuell mit $scope.$apply() aktualisieren müssen.

    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!");
    });

Dies mag nicht die perfekte Antwort sein, aber es erlaubte mir, jQuery-Ajax-Aufrufe mit angular zu verwenden und erlaubte mir, den $scope zu aktualisieren.




Als ich dieses Problem hatte, stellte sich heraus, dass der Parameter, den ich gepostet hatte, ein Array von Objekten anstelle eines einfachen Objekts war.




Ich habe nicht den Ruf zu kommentieren, aber als Antwort / Ergänzung zu Don Fs Antwort:

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

Ein zweiter Parameter von true muss der json_decode Funktion hinzugefügt werden, um ein assoziatives Array ordnungsgemäß zurückzugeben:

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




Wenn Sie PHP verwenden, ist dies eine einfache Möglichkeit, von einem AngularJS POST auf ein Array in PHP zuzugreifen.

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



Fügen Sie das in Ihrer js-Datei hinzu:

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

und füge das zu deiner Serverdatei hinzu:

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

Das sollte funktionieren.




Um Daten über Post-Methode mit $http von angularjs zu senden, müssen Sie ändern

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




Ähnlich wie das OP's vorgeschlagene Arbeitsformat & $http.post Antwort, außer dass $http.post anstatt nur $http und immer noch auf jQuery angewiesen ist.

Das Gute an der Verwendung von jQuery ist, dass komplexe Objekte korrekt übergeben werden. gegen die manuelle Umwandlung in URL-Parameter, die die Daten verstümmeln können.

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



Dieser Code hat das Problem für mich gelöst. Es ist eine Lösung auf Anwendungsebene:

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";
  }
]);



Ich hatte ein ähnliches Problem, und ich frage mich, ob dies auch nützlich sein kann: https://.com/a/11443066

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

Grüße,




Anders als JQuery und aus Gründen der Pedanterie verwendet Angular das JSON-Format für die POST-Datenübertragung von einem Client zum Server (JQuery wendet vermutlich x-www-form-urlencoded an, obwohl JQuery und Angular JSON für Datenimput verwenden). Daher gibt es zwei Problembereiche: in js Client-Teil und in Ihrem Server-Teil. Also brauchst du:

  1. Setzen Sie js Angular Client Teil wie folgt:

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

UND

  1. Schreibe in deinen Server Teil, um Daten von einem Client zu erhalten (wenn es PHP ist).

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

Hinweis: $ _POST wird nicht funktionieren!

Die Lösung funktioniert für mich gut, hoffentlich und für Sie.




Ich habe das mit den folgenden Codes gelöst:

Clientseite (Js):

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

Beachten Sie, dass Daten ein Objekt sind.

Auf dem 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;
        }

und "AllowCrossSiteJsonAttribute" wird für domänenübergreifende Anfragen benötigt:

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

Ich hoffe, das war nützlich.




Dies wurde schließlich in angular 1.4 mit $ httpParamSerializerJQLike behoben

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



Gerade aktualisiert von eckigen 1.2 bis 1.3, habe ein Problem im Code gefunden. Das Transformieren einer Ressource führt zu einer Endlosschleife, weil (ich denke) das $ Versprechen dasselbe Objekt wiederhält. Vielleicht wird es jemandem helfen ...

Ich könnte das beheben durch:

[...]
  /**
 * 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) {
[...]



Links