od jquery $ .ajax do kątowej $ http

122

Mam ten fragment kodu jQuery, który działa dobrze krzyżowo:

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

Teraz próbuję przekonwertować to na kod Angular.js bez żadnego sukcesu:

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

Każda pomoc doceniona.

Nieskończony
źródło
3
Nie znam angular.js, ale może faile () jest złą nazwą funkcji?
Bogdan Rybak
znaleziono inny podobny problem stackoverflow.com/questions/11786562/…
Endless
mógł znaleźć rozwiązanie stackoverflow.com/questions/12111936/ ... muszę kopać głęboko ...
Endless
Żądanie OPTIONS zostanie wysłane przez przeglądarkę, będzie przezroczyste dla AngularJS / Twojej aplikacji. Jeśli OPCJA powiedzie się, nastąpi pierwotne żądanie (POST / GET / cokolwiek), a Twój kod zostanie wywołany z powrotem dla żądania głównego, a nie OPCJI.
pkozlowski.opensource
Prawdopodobnie Angular nie zmienia metody żądania na OPTIONS. Prawdopodobnie przeglądarka sprawdza, czy może wykonać żądanie CORS. Jeśli próbujesz nawiązać połączenie z oddzielną domeną, Twoja przeglądarka najpierw wyśle ​​żądanie OPTIONS, aby sprawdzić, czy jest to dozwolone.
Ian

Odpowiedzi:

202

Sposób wywołania $ http przez AngularJS wyglądałby następująco:

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

lub można by było napisać jeszcze prościej przy użyciu metod skrótowych:

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

Jest kilka rzeczy, na które należy zwrócić uwagę:

  • Wersja AngularJS jest bardziej zwięzła (szczególnie przy użyciu metody .post ())
  • AngularJS zajmie się konwersją obiektów JS na ciąg JSON i ustawieniem nagłówków (te można dostosować)
  • Funkcje wywołania zwrotnego są odpowiednio nazwane successi error(proszę również zwrócić uwagę na parametry każdego wywołania zwrotnego) - wycofane w wersji kątowej 1.5
  • użyj thenzamiast tego funkcji.
  • Więcej informacji na temat thenużytkowania można znaleźć tutaj

Powyższe to tylko krótki przykład i kilka wskazówek, zapoznaj się z dokumentacją AngularJS, aby uzyskać więcej: http://docs.angularjs.org/api/ng.$http

pkozlowski.opensource
źródło
2
Dobrze wiedzieć! jednak nie mam do czynienia z błędem klienta, z którym mam do czynienia, Angular zmienia metodę żądania na OPCJE. myślę, że muszę zrobić kilka rzeczy po stronie serwera, aby to wesprzeć
Endless
Tak, myślę, że najpierw musisz rozwiązać problemy po stronie serwera. Wtedy będziesz mógł cieszyć się pełną mocą $ http kątowego po stronie klienta. Prawdopodobnie zobaczysz dodatkowe żądanie OPTIONS, ponieważ AngularJS wysyła więcej / różnych nagłówków w porównaniu z jQuery.
pkozlowski.opensource
1
UWAGA: w get "params:", ale nie "data:" patrz stackoverflow.com/questions/13760070/ ...
xander27
5
paramsi datasą dwie różne rzeczy: parametry kończą się w adresie URL (ciąg zapytania), a dane - w treści żądania (tylko dla typów żądań, które faktycznie mogą mieć treść).
pkozlowski.opensource
„Angular zmień metodę żądania na OPCJE. Myślę, że muszę zrobić kilka rzeczy po stronie serwera, aby ją obsługiwać” Mam ten sam problem, co dodaje angular, że jquery nie robi?
Andrew Luhring
1

Żądanie AJAX możemy zaimplementować korzystając z usługi http w AngularJs, która pomaga odczytywać / ładować dane ze zdalnego serwera.

Metody obsługi $ http są wymienione poniżej,

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

Jeden z przykładów:

    $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/

Vijayaragavan
źródło
-5

możesz użyć $ .param do przypisania danych:

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

spójrz na to: Problem międzydomenowy AngularJS + ASP.NET Web API

hanane
źródło
4
Zwróć uwagę, że $ .param to jQuery, więc aby go używać, musisz załadować jQuery. Aby zapoznać się z przykładem wolnym od jQuery przy użyciu przechwytywacza $ http transformRequest, zobacz pastebin.com/zsn9ASkM
Brian
@Brian Chwileczkę, czy jQuery nie jest zależnością AngularJS? Nigdy nie będziesz mieć $ http bez uprzedniego załadowania jQuery.
jnm2
2
@ jnm2 - nie, jQuery nie jest zależnością AngularJS. $ http odnosi się do składnika usługi Angular $ http , a nie do niczego z jQuery. AngularJS ma "jQuery Lite" dostępne do manipulowania DOM, ale jest bardzo ograniczone. From Angular element - jeśli jQuery jest dostępne, angular.element jest aliasem dla funkcji jQuery. Jeśli jQuery nie jest dostępne, angular.element deleguje do wbudowanego w Angulara podzbioru jQuery, zwanego „jQuery lite” lub „jqLite”.
Brian