від jquery $ .ajax до кутового $ http


122

У мене є цей фрагмент коду jQuery, який працює з чітким крос-походженням:

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

Тепер я намагаюся конвертувати це в код Angular.js без успіху:

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

Будь-яка допомога вдячна.


3
Не знаю angular.js, але, можливо, faile () - неправильна назва функції?
Богдан Рибак

знайшов ще один симулятор: stackoverflow.com/questions/11786562/…
Нескінченний

можливо, знайшли рішення stackoverflow.com/questions/12111936/… потрібно копати глибоко ...
Нескінченний

Запит OPTIONS буде виданий браузером, він буде прозорим для AngularJS / вашої програми. Якщо ОПЦІЯ вдасться, то буде виконано початковий запит (POST / GET / що завгодно), і ваш код буде передзвонено для основного запиту, а не для ОПЦІЇ.
pkozlowski.opensource

Можливо, це не кутове змінення методу запиту на OPTIONS. Ймовірно, ваш браузер перевіряє, чи може він робити запит CORS. Якщо ви намагаєтесь зателефонувати на окремий домен, ваш браузер спочатку зробить запит OPTIONS, щоб побачити, чи дозволено це.
Ян

Відповіді:


202

AngularJS спосіб виклику $ http виглядатиме так:

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

або можна записати ще простішими методами швидкого доступу:

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

Можна помітити ряд речей:

  • Версія AngularJS є більш стислою (особливо з використанням методу .post ())
  • AngularJS піклується про перетворення об'єктів JS у рядок JSON та встановлення заголовків (вони настроюються)
  • Функції зворотного дзвінка називаються successіerror зворотного дзвінка відповідно (також врахуйте параметри кожного зворотного дзвінка) - застарілі в кутовій версії 1.5
  • використовувати thenзамість цього функцію.
  • Більше інформації про thenвикористання можна знайти тут

Наведене вище - лише короткий приклад та деякі покажчики, не забудьте перевірити документацію AngularJS для отримання додаткової інформації: http://docs.angularjs.org/api/ng.$http


2
Добре знати! однак я не бачу своєї помилки клієнта, з якою я маю справу, кутова зміна методу Запит на ВАРІАНТИ. думаю, що мені доведеться зробити деякі речі на стороні сервера, щоб його підтримати
Нескінченний

Так, я думаю, вам потрібно спочатку розібратися з проблемами на сервері. Тоді ви зможете насолоджуватися повною потужністю $ http на angali на стороні клієнта. Можливо, ви бачите додатковий запит OPTIONS, оскільки AngularJS надсилає більше / різні заголовки порівняно з jQuery.
pkozlowski.opensource

1
Примітка: в МЕТ "Params:" але не "дані:" см stackoverflow.com/questions/13760070 / ...
xander27

5
paramsі dataце дві різні речі: параметри закінчуються в URL-адресі (рядок запиту), а дані - в тілі запиту (лише для типів запитів, які насправді можуть мати тіло).
pkozlowski.opensource

"Кутова зміна методу запиту на ВАРІАНТИ. Думаю, що я повинен зробити деякі сторонні серверні матеріали, щоб його підтримати" У мене є та ж проблема, що кутовий додає, що jquery не робить?
Ендрю Лурінг

1

Ми можемо реалізувати запит ajax за допомогою сервісу http в AngularJs, який допомагає читати / завантажувати дані з віддаленого сервера.

Методи обслуговування $ http наведені нижче,

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

Один із прикладів:

    $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

ви можете використовувати $ .param для призначення даних:

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

Подивіться на це: Випуск між доменом AngularJS + ASP.NET Web API


4
Лише зауважте, що $ .param - це jQuery, тому для його використання вам знадобиться завантажений jQuery. Для прикладу без jQuery з використанням $ http transformRequest перехоплювача див. Pastebin.com/zsn9ASkM
Брайан

@Brian Зачекайте хвилинку, чи не jQuery залежність AngularJS? Ніколи не будете мати $ http без попереднього завантаження jQuery.
jnm2

2
@ jnm2 - ні, jQuery - це не залежність AngularJS. $ http посилається на компонент послуги Angular $ http , не що інше, як jQuery. AngularJS має "jQuery Lite", доступний для управління DOM, але це дуже обмежено. Від кутового елемента - Якщо доступний jQuery, angular.element є псевдонімом функції jQuery. Якщо jQuery недоступний, angular.element делегує вбудовану підмножину jQuery, що називається "jQuery lite" або "jqLite."
Брайан
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.