get 請求數(shù)據(jù)
在 app.module.ts 引入 HttpModule 归粉、JsonpModule
import { HttpModule, JsonpModule } from '@angular/http';
在 app.module.ts 依賴注入 HttpModule 掠河、JsonpModule
imports: [
BrowserModule,
ComponentsModule,
HttpModule,
JsonpModule,
//IonicModule.forRoot(MyApp);
IonicModule.forRoot(MyApp,{
tabsHideOnSubPages:true,
backButtonText:'返回'
})
],
在需要請求數(shù)據(jù)的地方引入 Http
import {Http,Jsonp} from "@angular/http";
構造函數(shù)內申明
constructor(public http: Http, public jsonp: Jsonp,public navParams: NavParams)
對應的方法內使用 http 請求數(shù)據(jù)
getData() {
var that = this;
this.http.get(this.url).subscribe(function(data){
that.list = JSON.parse(data['_body']).result[0];
console.log(that.list);
}, function(err){
console.log(err);
});
}
在html文件中綁定數(shù)據(jù)
<h2>{{list.title}}</h2>
<div [innerHTML]='list.content'></div>
JSONP請求
this.url = 'http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid+'&callback=JSONP_CALLBACK';
getData() {
var that = this;
this.jsonp.get(this.url).subscribe(function(data){
that.list = data['_body'].result[0];
console.log(that.list);
}, function(err){
console.log(err);
});
}
用JSONP請求時需要在URL最好加上&callback=JSONP_CALLBACK，另外請求的數(shù)據(jù)格式也有變化畔塔，解析的時候需要注意魏铅；
另外，請求回調方法也可寫成(data)=>{}的形式:
getData() {
var that = this;
this.jsonp.get(this.url).subscribe((data)=>{
that.list = data['_body'].result[0];
console.log(that.list);
}, function(err){
console.log(err);
});
}
post請求數(shù)據(jù)
引入 Headers 监婶、Http 模塊
import {Http,Jsonp,Headers} from "@angular/http";
實例化 Headers
private headers = new Headers({'Content-Type': 'application/json'});
post 提交數(shù)據(jù)
this.http .post('http://localhost:8008/api/test', JSON.stringify({username: 'admin'}), {headers:this.headers}) // .toPromise()
.subscribe(function(res){
console.log(res.json());
});
