Heim > Artikel > Web-Frontend > So verwenden Sie Angular zum Implementieren der Datenanforderungsfunktion
Dieses Mal zeige ich Ihnen, wie Sie Angular zum Implementieren der Datenanforderungsfunktion verwenden. Was sind die Vorsichtsmaßnahmen für Angular, um die Datenanforderungsfunktion zu implementieren?
Wenn Sie Angular zum Anfordern von Daten verwenden, müssen Sie das HttpModule-Modul einführen. Wenn Sie den JSONP-Modus verwenden, müssen Sie das JsonpModule-Modul
import { HttpModule, JsonpModule } from '@angular/http'
einführen im aktuellen Modul Registrieren Sie
imports: [ HttpModule, JsonpModule ],
in den Importen. Nach der Registrierung können Sie die entsprechende Methode in der Komponentendatei einführen, um Datenanfragen
import { Http, Jsonp } from '@angular/http'
und dann im -Konstruktor der aktuellen Komponente durchzuführen Nach der Injektion können Sie es
constructor(private http: Http, private jsonp: Jsonp) { }
wie folgt verwenden: eine einfache Get-Anfrage
// 进行注入,拿到相对应的方法 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) }) }
und sie im Frontend rendern
<button (click)="getData()">get 请求数据</button> <ul> <li *ngFor="let item of list"> {{item.title}} </li> </ul>
JSONP-Anfragedaten
Beachten Sie den Unterschied zur Get-Anfrage. Verwenden Sie Folgendes:
// 请求数据 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) }) }rrree
Unterschiede
Das angegebene Callback-FunktionName&callback=JSONP_CALLBACK
Die Anforderungsmethode ändert sich in this.jsonp.get(url)Das nach der Anforderung erhaltene Datenformat ist nicht einheitlich und muss selbst angepasst werdenPOST-Anfrage
Die Anforderungsmethode unterscheidet sich geringfügig von der von GET. Zuerst müssen Sie sie vorstellen den Anfrage-Header {Header}// 渲染 <button (click)="jsonpData()">jsonp 请求数据</button> <ul> <li *ngFor="let item of list"> {{item.title}} </li> </ul>und dann: Um die Anfrage-Header zu definieren, müssen Sie zuerst die Header instanziieren
import { Http, Jsonp, Headers } from '@angular/http'Zum Schluss bringen Sie die Header bei der Übermittlung der Daten mit
private headers = new Headers({'Content-Type': 'application/json'})Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Es ist noch spannender. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website! Empfohlene Lektüre:
Analyse des Codes zur Berechnung des Einkaufsbetrags mit AngularJS
Wenn die URL in React-Router lautet nicht aktualisiert Parameter ändern
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Angular zum Implementieren der Datenanforderungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!