AngularJS AJAX - $http

$http es un servicio de AngularJS utilizado para leer datos de un servidor remoto.

AngularJS $http

AngularJS $http El servicio envía una solicitud al servidor y devuelve la respuesta.

Ejemplo

Enviar una solicitud simple al servidor y mostrar el resultado en el título:

<div ng-app="myApp" ng-controller="myCtrl">
<p>El mensaje de bienvenida de hoy es:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm")
  .then(function(response) {
    $scope.myWelcome = response.data;
  });
});
</script>

Prueba personalmente

método

El ejemplo anterior utiliza $http del servicio .get Método.

El método .get es una forma rápida del servicio $http. Tiene los siguientes métodos rápidos:

  • .delete()
  • .get()
  • .head()
  • .jsonp()
  • .patch()
  • .post()
  • .put()

Los métodos anteriores son formas rápidas de llamar al servicio $http:

Ejemplo

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http({
    method : "GET",
      url : "welcome.htm"
  }).then(function mySuccess(response) {
    $scope.myWelcome = response.data;
  }, function myError(response) {
    $scope.myWelcome = response.statusText;
  });
});

Prueba personalmente

El ejemplo anterior utiliza un objeto como parámetro para ejecutar el servicio $http. Este objeto especifica el método HTTP, la URL, la acción a ejecutar cuando tiene éxito y la acción a ejecutar cuando falla.

Propiedad

La respuesta del servidor es un objeto que tiene las siguientes propiedades:

  • .config Objeto utilizado para generar solicitudes
  • .data Cadena o objeto, que lleva la respuesta del servidor
  • .headers Función para obtener información de encabezado
  • .status Definir números de estado HTTP
  • .statusText Definir cadenas de estado HTTP

Ejemplo

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm")
  .then(function(response) {
    $scope.content = response.data;
    $scope.statuscode = response.status;
    $scope.statustext = response.statusText;
  });
});

Prueba personalmente

Para manejar errores, diríjase a .then Añadir una función al método:

Ejemplo

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("wrongfilename.htm")
  .then(function(response) {
    // Primera función maneja éxito
    $scope.content = response.data;
  }, function(response) {
    // Segunda función maneja errores
    $scope.content = "Algo salió mal";
  });
});

Prueba personalmente

JSON

Los datos obtenidos de la respuesta deben estar en formato JSON.

JSON es una excelente manera de transmitir datos y es fácil de usar en AngularJS o cualquier otro JavaScript.

Por ejemplo: en el servidor tenemos un archivo que devuelve un objeto JSON que contiene 15 clientes, todos ellos están envueltos en un nombre registros del array.

Haga clic aquí para ver el objeto JSON.

Ejemplo

La directiva ng-repeat es perfecta para recorrer un array:

<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("customers.php").then(function(response) {}}
    $scope.myData = response.data.records;
  });
});
</script>

Prueba personalmente

Descripción de la aplicación:

La aplicación define customersCtrl controlador, con scope y http objeto.

$http es un Objeto XMLHttpRequest, utilizado para solicitar datos externos.

$http.get() Leídos desde https://www.codew3c.com/angular/customers.php Datos JSON.

Después de un éxito, el controlador crea un atributo en el ámbito myData, que incluye datos JSON desde el servidor.