dari jquery $ .ajax ke angular $ http


122

Saya memiliki kode jQuery yang berfungsi dengan baik lintas asal:

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

Sekarang saya sedang mencoba untuk mengubahnya menjadi kode Angular.js tanpa hasil apapun:

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

Setiap bantuan dihargai.


3
Tidak tahu angular.js tapi mungkin faile () adalah nama fungsi yang salah?
Bogdan Rybak

menemukan masalah simular lainnya stackoverflow.com/questions/11786562/…
Endless

mungkin telah menemukan solusi stackoverflow.com/questions/12111936/… perlu menggali lebih dalam ...
Endless

Permintaan OPTIONS akan dikeluarkan oleh browser, itu akan transparan untuk AngularJS / aplikasi Anda. Jika OPTION berhasil, permintaan asli (POST / GET / apapun) akan mengikuti dan kode Anda akan dipanggil kembali untuk permintaan utama bukan OPTION.
pkozlowski.opensource

Ini mungkin tidak Angular mengubah metode permintaan ke OPTIONS. Mungkin browser Anda sedang memeriksa untuk melihat apakah ia dapat melakukan permintaan CORS. Jika Anda mencoba melakukan panggilan ke domain terpisah, browser Anda akan membuat permintaan OPTIONS terlebih dahulu untuk melihat apakah diizinkan.
Ian

Jawaban:


202

Cara AngularJS memanggil $ http akan terlihat seperti ini:

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

atau bisa ditulis lebih sederhana lagi menggunakan metode pintas:

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

Ada beberapa hal yang perlu diperhatikan:

  • Versi AngularJS lebih ringkas (terutama menggunakan metode .post ())
  • AngularJS akan menangani konversi objek JS menjadi string JSON dan mengatur header (yang dapat disesuaikan)
  • Fungsi callback diberi nama successdan errormasing - masing (harap perhatikan juga parameter dari setiap callback) - Tidak digunakan lagi di angular v1.5
  • gunakan thenfungsi sebagai gantinya.
  • Info lebih lanjut tentang thenpenggunaan dapat ditemukan di sini

Di atas hanyalah contoh singkat dan beberapa petunjuk, pastikan untuk memeriksa dokumentasi AngularJS lebih lanjut: http://docs.angularjs.org/api/ng.$http


2
Senang mendengarnya! Namun saya tidak memikirkan kesalahan klien yang saya hadapi, Angular mengubah metode Permintaan ke OPTIONS. rasa saya harus melakukan beberapa hal sisi server untuk mendukungnya
Endless

Ya, saya rasa Anda perlu menyelesaikan masalah sisi server terlebih dahulu. Kemudian Anda akan dapat menikmati kekuatan penuh dari $ http angular di sisi klien. Mungkin Anda melihat permintaan OPTIONS tambahan karena AngularJS mengirim lebih banyak / header berbeda dibandingkan dengan jQuery.
pkozlowski.opensource

1
CATATAN: di dapatkan "params:" tetapi bukan "data:" lihat stackoverflow.com/questions/13760070/…
xander27

5
paramsdan dataada 2 hal yang berbeda: params berakhir di URL (string kueri) sementara data - dalam isi permintaan (hanya untuk jenis permintaan yang sebenarnya dapat memiliki isi).
pkozlowski.opource

"Angular mengubah metode Request ke OPTIONS. Saya pikir saya harus melakukan beberapa hal server untuk mendukungnya" Saya mengalami masalah yang sama, apa yang tidak ditambahkan sudut jquery itu?
Andrew Luhring

1

Kita dapat mengimplementasikan permintaan ajax dengan menggunakan layanan http di AngularJs, yang membantu membaca / memuat data dari server jarak jauh.

Metode layanan $ http tercantum di bawah ini,

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

Salah satu Contoh:

    $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

Anda dapat menggunakan $ .param untuk menetapkan data:

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

lihat ini: AngularJS + ASP.NET Web API Cross-Domain Issue


4
Perhatikan saja bahwa $ .param adalah jQuery, jadi Anda perlu memuat jQuery untuk menggunakannya. Untuk contoh bebas jQuery menggunakan $ http transformRequest interceptor, lihat pastebin.com/zsn9ASkM
Brian

@ Brian Tunggu sebentar, bukankah jQuery merupakan ketergantungan dari AngularJS? Anda tidak akan pernah memiliki $ http tanpa jQuery dimuat terlebih dahulu.
jnm2

2
@ jnm2 - tidak, jQuery bukanlah dependensi AngularJS. $ http mengacu pada komponen layanan $ http Angular , bukan apa pun dari jQuery. AngularJS memang memiliki "jQuery Lite" yang tersedia untuk memanipulasi DOM, tetapi sangat terbatas. Dari elemen Angular - Jika jQuery tersedia, angular.element adalah alias untuk fungsi jQuery. Jika jQuery tidak tersedia, angular.element mendelegasikan ke subset bawaan jQuery Angular, yang disebut "jQuery lite" atau "jqLite."
Brian
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.