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

AngularJS入門教程之 XMLHttpRequest實(shí)例講解

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

AngularJS XMLHttpRequest

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

讀取 JSON 文件

以下是存儲在web服務(wù)器上的 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服務(wù)器上數(shù)據(jù)的服務(wù)。

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

AngularJS 實(shí)例

<!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>

運(yùn)行結(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

應(yīng)用解析:

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

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

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

ng-controller 指令設(shè)置了 controller 對象 名。

函數(shù) customersController 是一個標(biāo)準(zhǔn)的 JavaScript 對象構(gòu)造器。

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

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

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

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

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

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

相關(guān)文章

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

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

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

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

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

    AngularJs每天學(xué)習(xí)之總體介紹

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

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

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

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

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

    AngularJs 60分鐘入門基礎(chǔ)教程

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

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

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

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

    這篇文章主要介紹了AngularJS實(shí)現(xiàn)ajax請求的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(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是輕量的、可擴(kuò)展的、用于提示的指令。具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-07-07
  • 動手寫一個angular版本的Message組件的方法

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

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

最新評論