AngularJS | AJAX – $http – Barcelona Geeks

AngularJS proporciona un servicio de control llamado AJAX – $http, que cumple la tarea de leer todos los datos que están disponibles en los servidores remotos. La demanda del requisito de los registros deseados se cumple cuando el servidor realiza la llamada a la base de datos mediante el navegador. Los datos se necesitan principalmente en formato JSON. Esto se debe principalmente a que para transportar los datos, JSON es un método de Amazon y también es sencillo y fácil de usar dentro de AngularJS, JavaScript, etc.

Sintaxis:

function studentController($scope,$https:) {
   var url = "data.txt";

   $https:.get(url).success( function(response) {
      $scope.students = response; 
   });
}

Método: hay muchos métodos que se pueden usar para llamar al servicio $http, estos también son métodos abreviados para llamar al servicio $http.

.correo()
.obtener()
.cabeza()
.jsonp()
.parche()
.Eliminar()
.poner()

Propiedades: con la ayuda de estas propiedades, la respuesta del servidor es un objeto.

.headers: para obtener la información del encabezado (una función).
.statusText: Para definir el estado HTTP (A String).
.status: Para definir el estado HTTP (Número A).
.data: para llevar la respuesta del servidor (una string/un objeto).
.config: Para generar la solicitud (Un Objeto).

Ejemplo: En primer lugar, tendremos un archivo que contendrá nuestros datos. Para este ejemplo, tenemos el archivo data.txt, que incluirá los registros del estudiante. El servicio $http realizará una llamada ajax. Va a desviar y configurar la respuesta para que los estudiantes tengan prioridad. Después de esta extracción, las tablas se elaborarán en el HTML, que se basará en el modelo de los estudiantes.

El archivo de datos.txt :

[
   {
      "Name" : "Ronaldo",
      "Goals" : 128,
      "Ratio" : "69%"
   },
   {
      "Name" : "James",
      "Goals" : 007,
      "Ratio" : "70%"
   },
   {
      "Name" : "Ali",
      "Goals" : 786,
      "Ratio" : "99%"
   },
   {
      "Name" : "Lionel ",
      "Goals" : 210,
      "Ratio" : "100%"
   }
]

Código:

<!DOCTYPE html>
<html>
  
<head>
    <title>AngularJS AJAX - $http</title>
    <style>
        table, th, td {
                    border: 1px #2E0854;
                    border-collapse: collapse;
                    padding: 5px;
                 }
                   
                 table tr:nth-child(odd) {
                    background-color: #F6ADCD;
                 }
                   
                 table tr:nth-child(even) {
                    background-color: #42C0FB;
                 }
    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
    </script>
</head>
<body>
   <center>
      <h1 style="color:green">GeeksforGeeks</h1>
      <h3>AJAX - $http</h>
      <div ng-app="" ng-controller="studentController">
         <table>
             <tr>
                <th>Name</th>
                <th>Goals</th>
                <th>Ratio</th>
             </tr>
             <tr ng-repeat="student in students">
                <td>{{ Player.Name }}</td>
                <td>{{ Player.Goals}}</td>
                <td>{{ Player.Ratio}}</td>
             </tr>
         </table>
      </div>
      <script>
            function studentController($scope, $http) {
                        var url = "/data.txt";
              
                        $http.get(url).then( function(response) {
                           $scope.students = response.data;
                        });
                     }
      </script>
   </center>
</body>
  
</html>

Producción:
corte ng

Publicación traducida automáticamente

Artículo escrito por SohomPramanick y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta