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