jquery $ .ajax'tan açısal $ http'ye


122

Çapraz orijinden iyi çalışan bu jQuery koduna sahibim:

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

Şimdi bunu herhangi bir başarı olmadan Angular.js koduna dönüştürmeye çalışıyorum:

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

Herhangi bir yardım takdir edildi.


3
Angular.js bilmiyorum ama faile () bir işlevin yanlış adı olabilir mi?
Bogdan Rybak

başka bir benzer sorun buldu stackoverflow.com/questions/11786562/…
Endless

bir çözüm bulmuş olabilir stackoverflow.com/questions/12111936/… derine inmeniz gerekiyor ...
Endless

OPTIONS talebi bir tarayıcı tarafından verilecek, AngularJS / uygulamanız için şeffaf olacaktır. OPTION başarılı olursa, orijinal istek (POST / GET / her neyse) takip edecek ve kodunuz OPTION değil ana istek için geri çağrılacaktır.
pkozlowski.opensource

Muhtemelen istek yöntemini OPTIONS olarak değiştiren Angular değildir. Muhtemelen tarayıcınız bir CORS isteği yapıp yapamayacağını kontrol ediyordur. Ayrı bir etki alanına çağrı yapmaya çalışıyorsanız, tarayıcınız izin verilip verilmediğini görmek için önce OPTIONS isteğinde bulunacaktır.
Ian 13

Yanıtlar:


202

$ Http'yi çağırmanın AngularJS yolu şuna benzer:

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

veya kısayol yöntemleri kullanılarak daha da basit yazılabilir:

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

Dikkat edilmesi gereken çok şey var:

  • AngularJS sürümü daha özlüdür (özellikle .post () yöntemi kullanılarak)
  • AngularJS, JS nesnelerini JSON dizesine dönüştürmek ve başlıkları ayarlamakla ilgilenecektir (bunlar özelleştirilebilir)
  • Geri arama işlevleri adlandırılır successve errorsırasıyla adlandırılır (ayrıca lütfen her geri aramanın parametrelerini not edin) - Açısal v1.5'te kullanımdan kaldırılmıştır
  • Kullanım thenyerine işlev görür.
  • Daha fazla thenkullanım bilgisi burada bulunabilir

Yukarıdakiler sadece hızlı bir örnek ve bazı ipuçlarıdır, daha fazlası için AngularJS belgelerini kontrol ettiğinizden emin olun: http://docs.angularjs.org/api/ng.$http


2
Bunu bildiğim iyi oldu! Bununla birlikte, uğraştığım istemci hatasını düşünmüyorum, İstek yöntemini OPTIONS olarak açısal olarak değiştirin. bunu desteklemek için sunucu tarafında bazı şeyler yapmam gerektiğini düşünüyorum
Endless

Evet, sanırım önce sunucu tarafındaki sorunları çözmeniz gerekiyor. O zaman, istemci tarafında angular'ın $ http'sinin tam gücünden yararlanabileceksiniz. AngularJS, jQuery'ye kıyasla daha fazla / farklı başlık gönderdiği için muhtemelen ek bir OPTIONS isteği görürsünüz.
pkozlowski.opensource

1
NOT: "parametreler:" alın, ancak "veri:" değil: stackoverflow.com/questions/13760070/…
xander27

5
paramsve data2 farklı şeydir: parametreler URL'de (sorgu dizesi), veri ise istek gövdesinde (yalnızca gövdeye sahip olabilen istek türleri için) sona erer.
pkozlowski.opensource

"İstek yöntemini OPTIONS olarak açısal olarak değiştirin. Bunu desteklemek için sunucu tarafında bazı şeyler yapmam gerektiğini düşünüyorum" Aynı sorunu yaşıyorum, açısal jquery'nin eklemediği şey nedir?
Andrew Luhring

1

AngularJs'de uzak sunucudan veri okunmasına / yüklenmesine yardımcı olan http hizmetini kullanarak ajax isteğini gerçekleştirebiliriz.

$ http hizmet yöntemleri aşağıda listelenmiştir,

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

Örneklerden biri:

    $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

veri atamak için $ .param kullanabilirsiniz:

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

şuna bakın: AngularJS + ASP.NET Web API Etki Alanları Arası Sorun


4
$ .Param'ın jQuery olduğuna dikkat edin, bu yüzden onu kullanmak için jQuery'nin yüklü olması gerekir. $ Http transformRequest durdurucu kullanan jQuery içermeyen bir örnek için bkz. Pastebin.com/zsn9ASkM
Brian

@Brian Bir dakika bekleyin, jQuery, AngularJS'nin bağımlılığı değil mi? Önce jQuery yüklenmeden asla $ http'ye sahip olmayacaksınız.
jnm2

2
@ jnm2 - hayır, jQuery, AngularJS'e bağımlı değildir. $ http, jQuery'deki hiçbir şeyi değil , Angular $ http hizmet bileşenini ifade eder . AngularJS, DOM'u işlemek için bir "jQuery Lite" içerir, ancak bu çok sınırlıdır. Gönderen Açısal eleman - jQuery mevcutsa, angular.element jQuery işlevi için bir diğer adıdır. JQuery kullanılamıyorsa, angular.element, Angular'ın "jQuery lite" veya "jqLite" adlı yerleşik jQuery alt kümesine yetki verir.
Brian
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.