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