AngularJS | AJAX – $ http

AngularJS提供了名为AJAX – $ http的控制服务，该服务用于读取远程服务器上所有可用数据的任务。当服务器使用浏览器进行数据库调用时，可以满足对所需记录的需求。数据大多需要JSON格式。这主要是因为对于传输数据而言，JSON是一种亚马逊方法，并且在AngularJS，JavaScript等中使用起来也很简单明了。

句法：

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

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

方法：有很多方法可以用来调用$ http服务，这也是调用$ http服务的快捷方法。

• 。邮政()
• 。得到()
• 。头()
• .jsonp()
• 。修补()
• 。删除()
• 。放()

属性：在这些属性的帮助下，服务器的响应是一个对象。

• .headers：获取标题信息(A 函数)。
• .statusText：定义HTTP状态(字符串)。
• .status：定义HTTP状态(数字)。
• .data：承载服务器的响应(字符串/对象)。
• .config：生成请求(一个对象)。

示例：首先，我们将有一个文件来包含我们的数据。对于此示例，我们有data.txt文件，其中将包括学生的记录。 $ http服务将进行ajax调用。它将转移并设置对具有优先权的学生的响应。提取之后，将根据学生模型以HTML格式绘制表格。

data.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%"
   }
]

代码：

  

    AngularJS AJAX - $http
    
        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;
                 }
    
    
    


   
      GeeksforGeeks
      AJAX - $http
      
         
             
                
                
                
             
             
                
                
                
             
         NameGoalsRatio{{ Player.Name }}{{ Player.Goals}}{{ Player.Ratio}}
      
      
            function studentController($scope, $http) {
                        var url = "/data.txt";
              
                        $http.get(url).then( function(response) {
                           $scope.students = response.data;
                        });
                     }
      
   

  

输出：