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.