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.