การใช้ Ajax ใน AngularJS

Ajax Call คือการเรียก,ส่ง  ข้อมูลหรือคำสั่งไปยังฝั่ง Server ผ่าน http โปรโตคอล ใน  AngularJS  เองก็มีตัว Control ที่ชื่อ $http เพื่อใช้ในการอ่านข้อมูลจากฝั่ง Server โดยสามารถที่จะ POST , GET , PUT ,DELETE และฝั่ง Server จะต้องทำการตอบสนองการเรียกเป็นข้อมูลในรูปแบบของ JSON. ซึงรูปแบบการเรียกเป็นดังนี้

function studentController($scope,$http) {
var url = "fileName.txt"; // ใส่ชื่อไฟล์ หรือ url ของเว็บ

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

ตัวอย่าง 

• ดึงข้อมูลจากเว็บ http://www.w3schools.com/angular/customers.php โดยมีรูปแบบข้อมูลดังนี้

{
"records": [
  {
    "Name" : "Alfreds Futterkiste",
    "City" : "Berlin",
    "Country" : "Germany"
  },
  {
    "Name" : "Berglunds snabbköp",
    "City" : "Luleå",
    "Country" : "Sweden"
  },
  {
    "Name" : "Centro comercial Moctezuma",
    "City" : "México D.F.",
    "Country" : "Mexico"
  },
  {
    "Name" : "Ernst Handel",
    "City" : "Graz",
    "Country" : "Austria"
  },
  {
    "Name" : "FISSA Fabrica Inter. Salchichas S.A.",
    "City" : "Madrid",
    "Country" : "Spain"
  },
  {
    "Name" : "Galería del gastrónomo",
    "City" : "Barcelona",
    "Country" : "Spain"
  },
  {
    "Name" : "Island Trading",
    "City" : "Cowes",
    "Country" : "UK"
  },
  {
    "Name" : "Königlich Essen",
    "City" : "Brandenburg",
    "Country" : "Germany"
  },
  {
    "Name" : "Laughing Bacchus Wine Cellars",
    "City" : "Vancouver",
    "Country" : "Canada"
  },
  {
    "Name" : "Magazzini Alimentari Riuniti",
    "City" : "Bergamo",
    "Country" : "Italy"
  },
  {
    "Name" : "North/South",
    "City" : "London",
    "Country" : "UK"
  },
  {
    "Name" : "Paris spécialités",
    "City" : "Paris",
    "Country" : "France"
  },
  {
    "Name" : "Rattlesnake Canyon Grocery",
    "City" : "Albuquerque",
    "Country" : "USA"
  },
  {
    "Name" : "Simons bistro",
    "City" : "København",
    "Country" : "Denmark"
  },
  {
    "Name" : "The Big Cheese",
    "City" : "Portland",
    "Country" : "USA"
  },
  {
    "Name" : "Vaffeljernet",
    "City" : "Århus",
    "Country" : "Denmark"
  },
  {
    "Name" : "Wolski Zajazd",
    "City" : "Warszawa",
    "Country" : "Poland"
  }
]
}

• เรียกข้อมูลไปที่ฝั่ง Server

AngularJS Sample Application

    

        

            

                
Name
                
City
                
Country
            
            

                
{{ customer.Name }}
                
{{ customer.City }}
                
{{ customer.Country }}
            
        
    

ผลลัพธ์ 

อ้างอิงข้อมูลจาก http://www.w3schools.com/angular/customers.ph

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.