Angular 數(shù)據(jù)請(qǐng)求的實(shí)現(xiàn)方法
使用 Angular 請(qǐng)求數(shù)據(jù)的時(shí)候,需要引入 HttpModule 模塊,如果使用的 jsonp 模式的話(huà),則需要另外引入 JsonpModule 模塊
import { HttpModule, JsonpModule } from '@angular/http'
然后在當(dāng)前模塊中的 imports 內(nèi)進(jìn)行注冊(cè)
imports: [ HttpModule, JsonpModule ],
注冊(cè)以后就可以在組件文件當(dāng)中引入相對(duì)應(yīng)的方法來(lái)進(jìn)行數(shù)據(jù)請(qǐng)求了
import { Http, Jsonp } from '@angular/http'
然后在當(dāng)前組件的構(gòu)造函數(shù)當(dāng)中進(jìn)行注入以后就可以使用了
constructor(private http: Http, private jsonp: Jsonp) { }
使用如下,一個(gè)簡(jiǎn)單的 get 請(qǐng)求
// 進(jìn)行注入,拿到相對(duì)應(yīng)的方法 constructor(private http: Http, private jsonp: Jsonp) { } public list: any = [] // 請(qǐng)求數(shù)據(jù) getData() { let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1' let _this = this this.http.get(url).subscribe((data) => { _this.list = JSON.parse(data['_body'])['result'] console.log(_this.list) }) }
前臺(tái)進(jìn)行渲染即可
<button (click)="getData()">get 請(qǐng)求數(shù)據(jù)</button> <ul> <li *ngFor="let item of list"> {{item.title}} </li> </ul>
JSONP 請(qǐng)求數(shù)據(jù)
注意區(qū)分與 get 請(qǐng)求的區(qū)別,使用如下
// 請(qǐng)求數(shù)據(jù) jsonpData() { let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK' let _this = this this.jsonp.get(url).subscribe((data) => { _this.list = data['_body']['result'] console.log(_this.list) }) }
// 渲染 <button (click)="jsonpData()">jsonp 請(qǐng)求數(shù)據(jù)</button> <ul> <li *ngFor="let item of list"> {{item.title}} </li> </ul>
不同點(diǎn)
請(qǐng)求的 url 參數(shù)結(jié)尾必須要添加指定的回調(diào)函數(shù)名稱(chēng) &callback=JSONP_CALLBACK
請(qǐng)求的方式變?yōu)?this.jsonp.get(url)
請(qǐng)求后得到的數(shù)據(jù)格式不統(tǒng)一,需要自行進(jìn)行調(diào)整
POST 請(qǐng)求
與 GET 的請(qǐng)求方式有些許不同,首先需要引入請(qǐng)求頭 { Headers }
import { Http, Jsonp, Headers } from '@angular/http'
然后來(lái)對(duì)請(qǐng)求頭進(jìn)行定義,需要先實(shí)例化 Headers
private headers = new Headers({'Content-Type': 'application/json'})
最后在提交數(shù)據(jù)的時(shí)候帶上 Headers 即可
postData() { let url = 'http://localhost:8080/login' let data = { "username": "zhangsan", "password": "123" } this.http.post( url, data, {headers: this.headers} ).subscribe((data) => { console.log(data) }) }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Angular2學(xué)習(xí)筆記——詳解NgModule模塊
這篇文章主要介紹了Angular2學(xué)習(xí)筆記——詳解NgModule模塊,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12Angular項(xiàng)目中$scope.$apply()方法的使用詳解
這篇文章主要給大家介紹了關(guān)于Angular項(xiàng)目中$scope.$apply()方法使用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Angularjs具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編一起來(lái)看看吧。2017-07-07Angularjs 實(shí)現(xiàn)動(dòng)態(tài)添加控件功能
這篇文章主要介紹了Angularjs 實(shí)現(xiàn)動(dòng)態(tài)添加控件功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-05-05詳解JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定
這篇文章主要介紹了JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定,包括作用域的繼承以及數(shù)據(jù)的單向和雙向綁定等重要知識(shí)點(diǎn),需要的朋友可以參考下2016-03-03AngularJS點(diǎn)擊添加樣式、點(diǎn)擊變色設(shè)置的實(shí)例代碼
本篇文章主要介紹了AngularJS點(diǎn)擊添加樣式、點(diǎn)擊變色設(shè)置的實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07Angular.JS判斷復(fù)選框checkbox是否選中并實(shí)時(shí)顯示
最近因?yàn)楣ぷ餍枰隽艘粋€(gè)選擇標(biāo)簽的功能,把一些標(biāo)簽展示給用戶(hù),用戶(hù)選擇自己喜歡的標(biāo)簽,就類(lèi)似我們?cè)谫?gòu)物網(wǎng)站看到的那種過(guò)濾標(biāo)簽似的,所以這篇文章就給大家介紹了Angular.JS判斷復(fù)選框checkbox是否選中并實(shí)時(shí)顯示的方法,下面來(lái)一起看看吧。2016-11-11angular使用bootstrap方法手動(dòng)啟動(dòng)的實(shí)例代碼
本篇文章主要介紹了angular使用bootstrap方法手動(dòng)啟動(dòng)的實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07Angular中使用$watch監(jiān)聽(tīng)object屬性值的變化(詳解)
下面小編就為大家?guī)?lái)一篇Angular中使用$watch監(jiān)聽(tīng)object屬性值的變化(詳解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04