欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS入門教程之 XMLHttpRequest實例講解

 更新時間：2016年07月27日 16:18:46   投稿：lqh  
本文主要講解 AngularJS XMLHttpRequest,這里給大家整理相關資料并提供實例代碼,有需要的小伙伴參考下

AngularJS XMLHttpRequest

$http 是 AngularJS 中的一個核心服務，用于讀取遠程服務器的數(shù)據(jù)。

讀取 JSON 文件

以下是存儲在web服務器上的 JSON 文件：

http://www.runoob.com/try/angularjs/data/Customers_JSON.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"
}
]
}

AngularJS $http

AngularJS $http 是一個用于讀取web服務器上數(shù)據(jù)的服務。

$http.get(url) 是用于讀取服務器數(shù)據(jù)的函數(shù)。

AngularJS 實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
 <li ng-repeat="x in names">
  {{ x.Name + ', ' + x.Country }}
 </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
 $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
 .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

運行結(jié)果：

  • Alfreds Futterkiste, Germany
  • Ana Trujillo Emparedados y helados, Mexico
  • Antonio Moreno Taquería, Mexico
  • Around the Horn, UK
  • B's Beverages, UK
  • Berglunds snabbköp, Sweden
  • Blauer See Delikatessen, Germany
  • Blondel père et fils, France
  • Bólido Comidas preparadas, Spain
  • Bon app', France
  • Bottom-Dollar Marketse, Canada
  • Cactus Comidas para llevar, Argentina
  • Centro comercial Moctezuma, Mexico
  • Chop-suey Chinese, Switzerland
  • Comércio Mineiro, Brazil

應用解析:

注意：以上代碼的 get 請求是本站的服務器，你不能直接拷貝到你本地運行，會存在跨域問題，解決辦法就是將

Customers_JSON.php 的數(shù)據(jù)拷貝到你自己的服務器上，附：PHP Ajax 跨域問題最佳解決方案。

AngularJS 應用通過 ng-app 定義。應用在 <div> 中執(zhí)行。

ng-controller 指令設置了 controller 對象 名。

函數(shù) customersController 是一個標準的 JavaScript 對象構(gòu)造器。

控制器對象有一個屬性: $scope.names。

$http.get() 從web服務器上讀取靜態(tài) JSON 數(shù)據(jù)。

服務器數(shù)據(jù)文件為：  http://www.runoob.com/try/angularjs/data/Customers_JSON.php。

當從服務端載入 JSON 數(shù)據(jù)時，$scope.names 變?yōu)橐粋€數(shù)組。

注意：以上代碼也可以用于讀取數(shù)據(jù)庫數(shù)據(jù)。

以上就是對AngularJS XMLHttpRequest資料的整理，后續(xù)繼續(xù)補充，希望能幫助有需要的朋友。

相關文章

  • 詳解基于Angular4+ server render(服務端渲染)開發(fā)教程

    詳解基于Angular4+ server render(服務端渲染)開發(fā)教程

    本篇文章主要介紹了詳解基于Angular4+ server render(服務端渲染)開發(fā)教程 ，具有一定的參考價值，有興趣的可以了解一下
    2017-08-08
  • angularJS自定義directive之帶參方法傳遞詳解

    angularJS自定義directive之帶參方法傳遞詳解

    今天小編就為大家分享一篇angularJS自定義directive之帶參方法傳遞詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-10-10
  • AngularJs每天學習之總體介紹

    AngularJs每天學習之總體介紹

    這篇文章主要為大家詳細介紹了Angularjs總體介紹及數(shù)據(jù)綁定部分內(nèi)容，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-08-08
  • AngularJS中一般函數(shù)參數(shù)傳遞用法分析

    AngularJS中一般函數(shù)參數(shù)傳遞用法分析

    這篇文章主要介紹了AngularJS中一般函數(shù)參數(shù)傳遞用法,結(jié)合實例形式分析了模型參數(shù)與普通參數(shù)的具體功能與使用技巧,需要的朋友可以參考下
    2016-11-11
  • Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包詳解

    Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包詳解

    基于流的前端自動化構(gòu)建工具，利用gulp可以提高前端開發(fā)效率，特別是在前后端分離的項目中。下面這篇文章主要給大家介紹了關于在Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包的相關資料，需要的朋友可以參考下。
    2017-07-07
  • AngularJs 60分鐘入門基礎教程

    AngularJs 60分鐘入門基礎教程

    AngularJs是一個不錯的用于開發(fā)SPA應用（單頁Web應用）的框架。通過本文給大家介紹angularjs基礎教程，需要的朋友要求學習吧
    2016-04-04
  • AngularJS獲取json數(shù)據(jù)的方法詳解

    AngularJS獲取json數(shù)據(jù)的方法詳解

    這篇文章主要介紹了AngularJS獲取json數(shù)據(jù)的方法,結(jié)合實例形式詳細分析了AngularJS獲取json數(shù)據(jù)的詳細步驟、操作技巧與相關注意事項,需要的朋友可以參考下
    2017-05-05
  • AngularJS實現(xiàn)ajax請求的方法

    AngularJS實現(xiàn)ajax請求的方法

    這篇文章主要介紹了AngularJS實現(xiàn)ajax請求的方法,結(jié)合實例形式分析了AngularJS實現(xiàn)ajax請求的前端界面、ajax交互及后臺php處理技巧,需要的朋友可以參考下
    2016-11-11
  • AngularJs的UI組件ui-Bootstrap之Tooltip和Popover

    AngularJs的UI組件ui-Bootstrap之Tooltip和Popover

    這篇文章主要介紹了AngularJs的UI組件ui-Bootstrap之Tooltip和Popover，tooltip和popover是輕量的、可擴展的、用于提示的指令。具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-07-07
  • 動手寫一個angular版本的Message組件的方法

    動手寫一個angular版本的Message組件的方法

    本篇文章主要介紹了動手寫一個angular版本的Message組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12

最新評論