de jquery $ .ajax para angular $ http


122

Eu tenho este pedaço de código jQuery que funciona bem entre origens:

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

Agora estou tentando converter isso para o código Angular.js sem sucesso:

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

Qualquer ajuda apreciada.


3
Não sei angular.js, mas talvez faile () seja o nome errado de uma função?
Bogdan Rybak

encontrado outro problema semelhante stackoverflow.com/questions/11786562/…
Endless

pode ter encontrado uma solução stackoverflow.com/questions/12111936/... necessidade de digg profunda ...
Sem Fim

A solicitação OPTIONS será emitida por um navegador, será transparente para o AngularJS / seu aplicativo. Se a OPÇÃO for bem-sucedida, a solicitação original (POST / GET / o que for) seguirá e seu código será chamado de volta para a solicitação principal, não a OPÇÃO.
usar o seguinte código

Provavelmente não é Angular alterar o método de solicitação para OPTIONS. Provavelmente, seu navegador está verificando se é possível fazer uma solicitação CORS. Se você estiver tentando fazer uma chamada para um domínio separado, seu navegador fará uma solicitação de OPÇÕES primeiro para ver se é permitida.
Ian

Respostas:


202

A maneira do AngularJS de chamar $ http seria semelhante a:

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

ou pode ser escrito ainda mais simples usando métodos de atalho:

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

Há várias coisas a serem observadas:

  • A versão do AngularJS é mais concisa (especialmente usando o método .post ())
  • O AngularJS cuidará da conversão de objetos JS em string JSON e da configuração de cabeçalhos (esses são personalizáveis)
  • As funções de retorno de chamada são nomeadas successe errorrespectivamente (observe também os parâmetros de cada retorno de chamada) - Descontinuado na versão angular v1.5
  • use a thenfunção.
  • Mais informações sobre o thenuso podem ser encontradas aqui

O exemplo acima é apenas um exemplo rápido e alguns indicadores, consulte a documentação do AngularJS para obter mais informações: http://docs.angularjs.org/api/ng.$http


2
Bom saber! No entanto, eu não entendo o erro do cliente com o qual estou lidando, Angular altere o método Request para OPTIONS. acho que eu tenho que fazer algumas coisas do lado do servidor para apoiá-lo
Sem Fim

Sim, acho que você precisa resolver os problemas do servidor primeiro. Então, você poderá desfrutar de todo o poder dos $ http da angular no lado do cliente. Provavelmente, você vê uma solicitação OPTIONS adicional, pois o AngularJS está enviando mais / diferentes cabeçalhos em comparação com o jQuery.
usar o seguinte código

1
NOTA: em get "params:" mas não "data:" consulte stackoverflow.com/questions/13760070/…
xander27

5
paramse datasão duas coisas diferentes: os parâmetros terminam na URL (sequência de consultas) enquanto os dados - no corpo da solicitação (apenas para os tipos de solicitação que realmente podem ter corpo).
Pkzlowski.opensource

"Angular altere o método Request para OPTIONS. Acho que tenho que fazer algumas coisas do lado do servidor para suportá-lo" Estou tendo o mesmo problema, o que o angular adiciona que o jquery não?
Andrew Luhring

1

Podemos implementar a solicitação ajax usando o serviço http no AngularJs, que ajuda a ler / carregar dados do servidor remoto.

Os métodos de serviço $ http estão listados abaixo,

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

Um dos exemplos:

    $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

você pode usar $ .param para atribuir dados:

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

veja isso: Problema entre domínios da API da Web AngularJS + ASP.NET


4
Apenas observe que $ .param é jQuery, portanto você precisará do jQuery carregado para usá-lo. Para um exemplo jQuery-livre usando $ http transformRequest interceptor, ver pastebin.com/zsn9ASkM
Brian

@ Brian Espere um minuto, o jQuery não é uma dependência do AngularJS? Você nunca terá $ http sem que o jQuery seja carregado primeiro.
Jnm2

2
@ jnm2 - não, o jQuery não é uma dependência do AngularJS. $ http refere-se ao componente de serviço Angular $ http , e não nada do jQuery. O AngularJS tem um "jQuery Lite" disponível para manipular o DOM, mas é muito limitado. Do elemento Angular - Se o jQuery estiver disponível, angular.element é um alias para a função jQuery. Se o jQuery não estiver disponível, o angular.element delega para o subconjunto interno do jQuery, chamado "jQuery lite" ou "jqLite".
11277 Brian
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.