AngularJs $ http.post () sendet keine Daten

Ich hatte das gleiche problem mit asp.net MVC und hier die Lösung gefunden

Es herrscht viel Verwirrung unter Neulingen zu AngularJSwarum die
$http service Kürzel Funktionen ($http.post()usw.) anscheinend nicht
werden Swap mit der jQuery - äquivalente (jQuery.post()usw.)

Der Unterschied liegt darin, wie jQuery und AngularJS serialisieren und übertragen der Daten. Grundsätzlich liegt das problem mit Ihrem server-Sprache der Wahl nicht in der Lage ist zu verstehen, AngularJS übertragung nativ ... standardmäßig jQuery überträgt Daten mit

Content-Type: x-www-form-urlencoded

vertrauten foo=bar&baz=moe Serialisierung.

AngularJSjedoch überträgt Daten mit

Content-Type: application/json 

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

JSON-Serialisierung, die leider einige Web-server-Sprachen—insbesondere
PHP—nicht unserialize nativ.

Funktioniert wie ein Charme.

CODE

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

InformationsquelleAutor der Antwort Felipe Miosso

Können Sie die standardmäßige "Content-Type" wie folgt:

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

Über die data format:

Den $http.post und $http.legen Sie die Methoden akzeptieren, JavaScript-Objekt (oder eine Zeichenfolge) mit dem Wert Ihrer Daten als parameter. Wenn man die Daten in ein JavaScript-Objekt, wird es standardmäßig konvertiert einen JSON-string.

Versuchen, mit dieser Variante

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

InformationsquelleAutor der Antwort Denison Luz

Benutze ich gerne eine Funktion zum konvertieren von Objekten in post-params.

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

InformationsquelleAutor der Antwort Rômulo Collopy

Benutze ich jQuery param mit AngularJS post requrest. Hier ist ein Beispiel ... erstellen AngularJS-Anwendung-Modul, wo myapp definiert ist, mit ng-app in Ihren HTML-code.

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

Nun lassen Sie uns einen Login-controller und POST-E-Mail und Passwort.

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

Mag ich nicht exaplain der code, es ist einfach genug zu verstehen 🙂 Beachten Sie, dass param ist von jQuery, so dass Sie installieren müssen sowohl jQuery und AngularJS damit es funktioniert. Hier ist ein screenshot.

Hoffe, das ist hilfreich. Danke!

InformationsquelleAutor der Antwort Madan Sapkota

Ich hatte das gleiche problem mit AngularJS und Node.js + Express 4 + Router

Router erwartet die Daten aus der post-Anforderung in den Körper. Dieser Körper war immer leer, wenn ich folgte dem Beispiel von Winkel-Docs

Notation 1

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

Aber wenn ich es in den Daten

Notation 2

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

Edit 1:

Sonst node.js router erwarten, dass die Daten in erf.Körper, wenn verwendet notation 1:

req.body.msg

Die auch sendet die Informationen als JSON-payload. Dies ist besser, in einigen Fällen, wo man ein array im json-und x-www-form-urlencoded geben wird, einige Probleme.

funktionierte es. Hoffe, es hilft.

InformationsquelleAutor der Antwort alknows

Bauen auf @felipe-miosso Antwort:

1. Download wie ein AngularJS-Modul von hier,
2. Installieren Sie es

3. Fügen Sie es zu Ihrer Anwendung:

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

InformationsquelleAutor der Antwort Renaud

Winkel

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

InformationsquelleAutor der Antwort Malcolm Swaine

Fügen Sie diese in Ihre js-Datei:

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

und fügen Sie diese zu Ihrem server die Datei:

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

Funktionieren sollte.

InformationsquelleAutor der Antwort Jesus Erwin Suarez

dies ist wahrscheinlich eine späte Antwort, aber ich denke, der richtige Weg ist, um das gleiche Stück code, Winkel verwenden, wenn dabei ein "get" - Anforderung verwenden Sie $httpParamSerializer haben, um es zu injizieren, um Ihre controller
so können Sie einfach Folgendes tun ohne Jquery an alle ,
$http.post(url,$httpParamSerializer({param:val}))

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

InformationsquelleAutor der Antwort oneLeggedChicken

Den ich kenne, hat akzeptiert Antwort. Aber Folgendes könnte helfen, die zukünftigen Leser, wenn die Antwort nicht zu Ihnen passen aus irgendeinem Grund.

Winkel nicht ajax gleiche wie jQuery. Während ich versuchte, befolgen Sie die Anleitung zum ändern der Winkel - $httpprovider begegnete ich andere Probleme. E. g. Ich verwende codeigniter in die $this->input->is_ajax_request() Funktion immer gescheitert (die geschrieben wurde von einem anderen Programmierer und weltweit verwendet, also nicht ändern) und Sie sagen: dies war nicht real, ajax-request.

Um es zu lösen, nahm ich Hilfe von latente Versprechen. Getestet habe ich es in Firefox und ie9 und es funktionierte.

Habe ich folgende Funktion definiert außerhalb jeder der Winkel-code. Diese Funktion macht regelmäßig jquery-ajax-Aufruf und gibt der latenten/das Versprechen (ich Lerne noch) - Objekt.

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

Dann nenne ich es die angular-code mit den folgenden code. Bitte beachten Sie, dass wir aktualisieren die $scope manuell mit $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!");
    });

Dies ist vielleicht nicht die perfekte Antwort, aber es mir erlaubt, die jquery-ajax-Aufrufe mit Winkel-und mir erlaubt, zu aktualisieren $scope.

InformationsquelleAutor der Antwort Nis

Ich bin mit asp.net WCF-webservices mit angular js und folgenden code
gearbeitet:

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

Hoffe, es hilft.

InformationsquelleAutor der Antwort Mehdi Rostami

Wenn mit Gewinkelt >= 1.4hier ist die sauberste Lösung mit der serializer zur Verfügung gestellt von Winkel:

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

Dann können Sie einfach tun dies überall in Ihrem app:

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

Und es wird richtig serialisieren Sie die Daten als param1=value1&param2=value2 und senden Sie es an /requesturl mit der application/x-www-form-urlencoded; charset=utf-8 Content-Type-header, so wie es normalerweise zu erwarten mit POST-Anfragen an den Endpunkten.

TL;DR

Während meiner Forschung fand ich, dass die Antwort auf dieses problem kommt in vielen verschiedenen Geschmacksrichtungen; einige sind sehr verworren und hängt von benutzerdefinierten Funktionen, manche davon abhängen, jQuery und manche sind unvollständig, in der Annahme, dass Sie brauchen nur den header.

Wenn Sie nur die Content-Type header, der end-Punkt finden Sie die POST-Daten, aber es wird nicht in das standard-format, es sei denn, weil Sie bieten einen string als Ihre data oder manuell Daten serialisiert Objekt, es wird serialisiert als JSON standardmäßig und möglicherweise falsch interpretiert, die auf dem Endpunkt.

z.B. wenn die richtigen serializer nicht gesetzt wurde in dem oben genannten Beispiel, es würde gesehen werden, die im Endpunkt als:

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

Und kann dazu führen, dass unerwartete analysieren, z.B. ASP.NET behandelt es als eine null parameter name, mit {"param1":"value1","param2":"value2"} als Wert; oder Fiddler interpretiert es anders, mit {"param1":"value1","param2":"value2"} wie die parameter Namen und null als Wert.

InformationsquelleAutor der Antwort Saeb Amini

Als ich dieses problem hatte der parameter I wurde die Buchung stellte sich heraus, dass ein array von Objekten, anstatt von einem einfachen Objekt.

InformationsquelleAutor der Antwort D. Kermott

Habe ich mit der Antwort akzeptiert code (Felipe ' s code) für eine Weile und es funktioniert bestens (danke, Felipe!).

Jedoch, vor kurzem habe ich entdeckt, dass es Probleme mit leeren Objekte oder arrays.
Zum Beispiel bei der Einreichung dieses Objekt:

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

PHP scheint nicht zu sehen, B und C an alle. Es wird dies:

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

Einen Blick auf die aktuelle Anforderung in Chrome zeigt dies:

A: 1
:
D: 2

Schrieb ich eine alternative code-snippet. Es scheint zu funktionieren gut mit meinem use-cases, aber ich habe nicht ihn ausführlich getestet, also mit Vorsicht verwenden.

Ich verwendet, Typoskript, weil ich wie starke Typisierung, aber es wäre einfach zu konvertieren, um Reine JS:

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

Es ist weniger effizient als Felipe ' s code, aber ich glaube nicht, dass es darauf ankommt viel, da sollte es sofort im Vergleich zu den Gesamt-overhead der HTTP-request selbst.

Nun PHP zeigt:

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

Soweit ich weiß, es ist nicht möglich, PHP zu erkennen, dass B. a und C sind leere arrays, aber zumindest die Tasten erscheinen, das ist wichtig, wenn es code, die sich auf die eine gewisse Struktur, auch wenn sich der im wesentlichen leer im inneren.

Beachten Sie auch, dass es konvertiert undefineds und nulls auf leere strings.

InformationsquelleAutor der Antwort obe

Ich dies Problem gelöst, indem unterhalb codes:

Client-Seite (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 die Daten eines Objekts.

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' ist für cross-domain-requests:

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

Hoffe, das war nützlich.

InformationsquelleAutor der Antwort pixparker