от jquery $ .ajax до угловых $ http

110

У меня есть этот кусок кода 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");
    }
});

Теперь я tring, чтобы преобразовать это в 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 () - это неправильное имя функции?
  • 0
    обнаружил еще одну симуляционную проблему stackoverflow.com/questions/11786562/…
Показать ещё 3 комментария
Теги:
angular-http
cross-domain

4 ответа

187
Лучший ответ

Угловой способ вызова $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 соответственно (также обратите внимание на параметры каждого обратного вызова) - Устаревшие в angular v1.5
  • используйте then функцию.
  • Более подробную информацию об использовании then можно найти здесь

Вышеприведенный пример - просто быстрый пример и некоторые указатели, обязательно проверьте документацию по AngularJS для более: http://docs.angularjs.org/api/ng.$http

Поделиться
  • 2
    Хорошо знать! однако я не знаю, с какой ошибкой клиента я имею дело, Angular изменил метод Request на OPTIONS. думаю, что я должен сделать некоторые вещи на стороне сервера, чтобы поддержать его
  • 0
    Да, я думаю, вам нужно сначала разобраться с проблемами на стороне сервера. Тогда вы сможете насладиться полной мощью angular $ http на стороне клиента. Возможно, вы видите дополнительный запрос OPTIONS, так как AngularJS отправляет больше / разных заголовков по сравнению с jQuery.
Показать ещё 3 комментария
0

Вы можете использовать это:

Скачайте "angular -post-fix": "^ 0.1.0"

Затем добавьте 'httpPostFix' к вашим зависимостям, объявив модуль angular.

Ссылка: https://github.com/PabloDeGrote/angular-httppostfix

Поделиться
0

Мы можем реализовать запрос 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/

Поделиться
-3

вы можете использовать $.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

Поделиться
  • 4
    Обратите внимание, что $ .param - это jQuery, поэтому для его использования вам нужно загрузить jQuery. Пример использования jQuery без перехватчика $ http transformRequest приведен на странице pastebin.com/zsn9ASkM.
  • 0
    @ Брайан Подождите, разве jQuery не является зависимостью от AngularJS? Вы никогда не получите $ http без предварительной загрузки jQuery.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню