de jquery $ .ajax a angular $ http


122

Tengo este fragmento de código jQuery que funciona bien en origen cruzado:

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

Ahora estoy tratando de convertir esto al código Angular.js sin ningún éxito:

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

Cualquier ayuda apreciada.


3
No sé angular.js pero tal vez faile () es un nombre incorrecto de una función?
— Bogdan Rybak

encontró otro problema simular stackoverflow.com/questions/11786562/…
— Sin fin

podría haber encontrado una solución stackoverflow.com/questions/12111936/... necesita cavar profundo ...
— Sin fin

La solicitud de OPCIONES será emitida por un navegador, será transparente para AngularJS / su aplicación. Si la OPCIÓN tiene éxito, la solicitud original (POST / GET / lo que sea) seguirá y su código será devuelto para la solicitud principal, no la OPCIÓN.
— pkozlowski.opensource

Probablemente no sea Angular cambiar el método de solicitud a OPTIONS. Es probable que su navegador esté verificando si puede hacer una solicitud CORS. Si está intentando hacer una llamada a un dominio separado, su navegador primero hará una solicitud de OPCIONES para ver si está permitido.
— Ian

Respuestas:


202

La forma de AngularJS de llamar a $ http se vería así:

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

o podría escribirse aún más simple usando métodos de acceso directo:

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

Hay varias cosas a tener en cuenta:

  • La versión de AngularJS es más concisa (especialmente usando el método .post ())
  • AngularJS se encargará de convertir objetos JS en cadenas JSON y establecer encabezados (esos son personalizables)
  • Las funciones de devolución de llamada se nombran successy errorrespectivamente (también tenga en cuenta los parámetros de cada devolución de llamada) - Desaprobado en angular v1.5
  • use la thenfunción en su lugar.
  • Más información de thenuso se puede encontrar aquí

Lo anterior es solo un ejemplo rápido y algunos consejos, asegúrese de consultar la documentación de AngularJS para obtener más información: http://docs.angularjs.org/api/ng.$http


2
¡Bueno saber! Sin embargo, no creo que esté tratando con su error de cliente, Angular cambie el método de solicitud a OPCIONES. creo que tengo que hacer algunas cosas del lado del servidor para soportarlo
— Endless

Sí, supongo que primero debe resolver los problemas del lado del servidor. Entonces podrá disfrutar de toda la potencia de $ http de angular en el lado del cliente. Probablemente vea una solicitud de OPCIONES adicional ya que AngularJS está enviando más / diferentes encabezados en comparación con jQuery.
— pkozlowski.opensource

1
NOTA: en get "params:" pero no "data:" consulte stackoverflow.com/questions/13760070/…
— xander27

55
paramsy datason 2 cosas diferentes: los parámetros terminan en la URL (cadena de consulta) mientras que los datos - en el cuerpo de la solicitud (solo para los tipos de solicitud que realmente pueden tener cuerpo).
— pkozlowski.opensource

"Angular cambia el método de Solicitud a OPCIONES. Creo que tengo que hacer algunas cosas del lado del servidor para admitirlo" Estoy teniendo el mismo problema, ¿qué angular agrega que jquery no?
— Andrew Luhring el

1

Podemos implementar la solicitud ajax utilizando el servicio http en AngularJs, que ayuda a leer / cargar datos del servidor remoto.

Los métodos de servicio $ http se enumeran a continuación,

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

Uno de los ejemplos:

    $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

puede usar $ .param para asignar datos:

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

mira esto: AngularJS + ASP.NET Web API Cross-Domain Issue


44
Solo una nota de que $ .param es jQuery, por lo que necesitará jQuery cargado para usarlo. Para ver un ejemplo sin jQuery usando el interceptor $ http transformRequest, consulte pastebin.com/zsn9ASkM
— Brian

@Brian Espera un minuto, ¿no es jQuery una dependencia de AngularJS? Nunca tendrá $ http sin que primero se cargue jQuery.
— jnm2

2
@ jnm2: no, jQuery no es una dependencia de AngularJS. $ http se refiere al componente de servicio Angular $ http , no a nada de jQuery. AngularJS tiene un "jQuery Lite" disponible para manipular el DOM, pero es muy limitado. Desde elemento angular : si jQuery está disponible, angular.element es un alias para la función jQuery. Si jQuery no está disponible, angular.element delega al subconjunto integrado de AngQ de jQuery, llamado "jQuery lite" o "jqLite".
— Brian
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.