Angular data request implementation-JS Tutorial-php.cn

This time I will bring you the implementation of angular data request. What are theprecautionsfor the implementation of angular data request? The following is a practical case, let's take a look.

When using Angular to request data, you need to introduce the HttpModulemodule. If you use the jsonp mode, you need to introduce the JsonpModule module

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

Copy after login

and then in the current module Register within the imports

imports: [ HttpModule, JsonpModule ],

Copy after login

After registration, you can introduce the corresponding method in the component file to make data requests

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

Copy after login

Then in theconstructor of the current componentAfter injecting it, you can use it

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

Copy after login

Use as follows, a simple get request

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

Copy after login

Rendering in the frontend

   {{item.title}}

Copy after login

JSONP request Data

Pay attention to the difference from the get request, use the following

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

Copy after login

// 渲染    {{item.title}}

Copy after login

Differences

The specified ## must be added at the end of the requested url parameter #Callback functionName&callback=JSONP_CALLBACK

The request method changes to this.jsonp.get(url)

The data format obtained after the request is not uniform and needs to be adjusted by yourself

POST request

The request method is slightly different from that of GET. First, you need to introduce the request header {Headers}

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

Copy after login

and then To define the request headers, you need to instantiate Headers first

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

Copy after login

Finally bring Headers when submitting data

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

Copy after login

I believe you have mastered the method after reading the case in this article, and there will be more exciting things Please pay attention to other related articles on php Chinese website!