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.


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


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/



-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


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
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.