Implémentation de requêtes de données angulaires

Cette fois, je vais vous présenter la mise en œuvre de la demande de données angulaires. Quelles sont les précautions dans la mise en œuvre de la demande de données angulaires. Ce qui suit est un cas pratique, jetons un coup d'œil.

Lorsque vous utilisez Angular pour demander des données, vous devez introduire le module HttpModule Si vous utilisez le mode jsonp, vous devez introduire le module JsonpModule

import { HttpModule, JsonpModule } from '@angular/http'

. puis dans le registre actuel dans les importations dans le module

imports: [
 HttpModule,
 JsonpModule
],

Après l'inscription, vous pouvez introduire la méthode correspondante dans le fichier du composant pour faire des requêtes de données

import { Http, Jsonp } from '@angular/http'

Puis dans le le Constructeur du composant actuel peut être utilisé après l'injection

constructor(private http: Http, private jsonp: Jsonp) { }

est utilisé comme suit, une simple requête d'obtention

// 进行注入，拿到相对应的方法
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)
 })
}

peut être rendue dans le frontend

<button (click)="getData()">get 请求数据</button>
<ul>
 <li *ngFor="let item of list">
  {{item.title}}
 </li>
</ul>

Données de demande JSONP

Faites attention à la différence avec la demande d'obtention, utilisez ce qui suit

// 请求数据
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>

Différences

La fonction de rappel spécifiéename&callback=JSONP_CALLBACK

La méthode de requête devient this.jsonp.get(url)

Le format de données obtenu après la demande n'est pas uniforme et doit être ajustée par vous-même

Requête POST

est légèrement différente de la méthode de requête GET Tout d'abord, vous. vous devez introduire l'en-tête de la requête { Headers }

import { Http, Jsonp, Headers } from '@angular/http'

puis définir l'en-tête de la requête

private headers = new Headers({'Content-Type': 'application/json'})

et enfin apporter les en-têtes lors de la soumission des données <.>

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)
 })
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des cas d'utilisation de la fonction de rappel JS

PHP implémente rapidement la méthode de déduplication de tableau

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!