von jquery $ .ajax bis eckig $ http


122

Ich habe dieses Stück jQuery-Code, das gut funktioniert.

jQuery.ajax({
    url: "http://example.appspot.com/rest/app",
    type: "POST",
    data: JSON.stringify({"foo":"bar"}),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (response) {
        console.log("success");
    },
    error: function (response) {
        console.log("failed");
    }
});

Jetzt versuche ich, dies ohne Erfolg in Angular.js Code zu konvertieren:

$http({
    url: "http://example.appspot.com/rest/app",
    dataType: "json",
    method: "POST",
    data: JSON.stringify({"foo":"bar"}),
    headers: {
        "Content-Type": "application/json; charset=utf-8"
    }
}).success(function(response){
    $scope.response = response;
}).error(function(error){
    $scope.error = error;
});

Jede Hilfe geschätzt.


3
Sie kennen angular.js nicht, aber vielleicht ist faile () ein falscher Name einer Funktion?
Bogdan Rybak

fand ein anderes ähnliches Problem stackoverflow.com/questions/11786562/…
Endless

Vielleicht haben Sie eine Lösung gefunden. stackoverflow.com/questions/12111936/… müssen tief graben ...
Endless

Die OPTIONS-Anfrage wird von einem Browser ausgegeben und ist für AngularJS / Ihre Anwendung transparent. Wenn die OPTION erfolgreich ist, folgt die ursprüngliche Anforderung (POST / GET / was auch immer) und Ihr Code wird für die Hauptanforderung zurückgerufen, nicht für die OPTION.
pkozlowski.opensource

Es ist wahrscheinlich nicht Angular, die Anforderungsmethode in OPTIONEN zu ändern. Es ist wahrscheinlich Ihr Browser, der prüft, ob er eine CORS-Anfrage ausführen kann. Wenn Sie versuchen, eine separate Domain anzurufen, sendet Ihr Browser zuerst eine OPTIONS-Anfrage, um festzustellen, ob dies zulässig ist.
Ian

Antworten:


202

Die AngularJS-Methode zum Aufrufen von $ http sieht folgendermaßen aus:

$http({
    url: "http://example.appspot.com/rest/app",
    method: "POST",
    data: {"foo":"bar"}
}).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.data = response.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.error = response.statusText;
});

oder könnte mit Verknüpfungsmethoden noch einfacher geschrieben werden:

$http.post("http://example.appspot.com/rest/app", {"foo":"bar"})
.then(successCallback, errorCallback);

Es gibt eine Reihe von Dingen zu beachten:

  • Die AngularJS-Version ist prägnanter (insbesondere mit der .post () -Methode).
  • AngularJS kümmert sich um die Konvertierung von JS-Objekten in JSON-Zeichenfolgen und das Setzen von Headern (diese können angepasst werden).
  • Callback - Funktionen werden benannt successund errorjeweils (auch Notenparameter jeden Rückruf bitte) - Veraltet in Winkel v1.5
  • Verwenden Sie thenstattdessen die Funktion.
  • Weitere Informationen zur thenNutzung finden Sie hier

Das Obige ist nur ein kurzes Beispiel und einige Hinweise. Weitere Informationen finden Sie in der AngularJS-Dokumentation: http://docs.angularjs.org/api/ng.$http


2
Gut zu wissen! Wie auch immer, es ist kein Client-Fehler, mit dem ich es zu tun habe. Angular ändert die Request-Methode in OPTIONS. Ich denke, ich muss einige serverseitige Dinge tun, um es zu unterstützen
Endless

Ja, ich denke, Sie müssen zuerst serverseitige Probleme lösen. Dann können Sie auf der Clientseite die volle Leistung von Angulars $ http nutzen. Wahrscheinlich wird eine zusätzliche OPTIONS-Anforderung angezeigt, da AngularJS im Vergleich zu jQuery mehr / andere Header sendet.
pkozlowski.opensource

1
HINWEIS: in get "params:" aber nicht "data:" siehe stackoverflow.com/questions/13760070/…
xander27

5
paramsund datasind zwei verschiedene Dinge: Parameter landen in der URL (Abfragezeichenfolge), während Daten - im Anfragetext (nur für Anforderungstypen, die tatsächlich einen Text haben können).
pkozlowski.opensource

"Angular ändert die Request-Methode in OPTIONS. Ich denke, ich muss einige serverseitige Dinge tun, um sie zu unterstützen." Ich habe das gleiche Problem. Was fügt Angular hinzu, was jquery nicht tut?
Andrew Luhring

1

Wir können eine Ajax-Anforderung mithilfe des http-Dienstes in AngularJs implementieren, der das Lesen / Laden von Daten vom Remote-Server erleichtert.

$ http-Servicemethoden sind unten aufgeführt.

 $http.get()
 $http.post()
 $http.delete()
 $http.head()
 $http.jsonp()
 $http.patch()
 $http.put()

Eines der Beispiele:

    $http.get("sample.php")
        .success(function(response) {
            $scope.getting = response.data; // response.data is an array
    }).error(){

        // Error callback will trigger
    });

http://www.drtuts.com/ajax-requests-angularjs/



-5

Sie können $ .param verwenden, um Daten zuzuweisen:

 $http({
  url: "http://example.appspot.com/rest/app",
  method: "POST",
  data: $.param({"foo":"bar"})
  }).success(function(data, status, headers, config) {
   $scope.data = data;
  }).error(function(data, status, headers, config) {
   $scope.status = status;
 });

Sehen Sie sich das an: AngularJS + ASP.NET Web API-Problem zwischen Domänen


4
Nur ein Hinweis, dass $ .param jQuery ist, daher muss jQuery geladen sein, um es zu verwenden. Ein jQuery-freies Beispiel mit dem Interceptor $ http transformRequest finden Sie unter pastebin.com/zsn9ASkM
Brian,

@Brian Moment mal, ist jQuery nicht eine Abhängigkeit von AngularJS? Sie werden niemals $ http haben, ohne dass jQuery zuerst geladen wird.
jnm2

2
@ jnm2 - nein, jQuery ist keine Abhängigkeit von AngularJS. $ http bezieht sich auf die Angular $ http-Dienstkomponente , nicht auf jQuery. AngularJS verfügt zwar über ein "jQuery Lite" zum Bearbeiten des DOM, es ist jedoch sehr begrenzt. Von Winkelelement - Wenn jQuery verfügbar ist, angular.element ist ein Alias für die jQuery - Funktion. Wenn jQuery nicht verfügbar ist, delegiert angle.element an Angulars integrierte Teilmenge von jQuery, die als "jQuery lite" oder "jqLite" bezeichnet wird.
Brian
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.