Html
<h2>你好angular</h2>
<!--
<button (click)="requestData()">
请求数据
</button>-->
<button (click)="requestJsonpData()">
请求数据 jsonp
</button>
<br>
<br>
<button (click)="postData()">
提交数据postData
</button>
<ul>
<li *ngFor="let item of list">
{{item.title}}
</li>
</ul>Ts
import { Component, OnInit } from '@angular/core';
import { Http,Jsonp,Headers } from '@angular/http'; /*数据请求模块*/
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
public list:any[];
private headers = new Headers({'Content-Type': 'application/json'});
constructor(private http:Http,private jsonp:Jsonp,) {
}
ngOnInit() {
}
requestData(){
var _that=this;
// alert('请求数据');
var url="http://www.chinayabisi.com/appapi.aspx?a=getPortalList&catid=20&page=1";
this.http.get(url).subscribe(function(data){
// console.log(JSON.parse(data['_body']));
var list=JSON.parse(data['_body']);
// console.log(_that.list['result']);
_that.list=list['result'];
},function(err){
console.log(err);
})
}
requestJsonpData(){
// jsonp 必须得在url加回到 &callback=JSONP_CALLBACK
var _that=this;
// alert('请求数据');
//var url="http://www.chinayabisi.com/appapi.aspx?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK";
var url="http://127.0.0.1:3000/news?&callback=JSONP_CALLBACK";
this.jsonp.get(url).subscribe(function(data){
console.log(data);
// _that.list=data['_body']['result'];
},function(err){
console.log(err);
})
}
postData(){
// 1.import { Http,Jsonp,Headers } from '@angular/http'; Headers 定义请求头的
//2.private headers = new Headers({'Content-Type': 'application/json'});
//3.post提交数据
var url="http://127.0.0.1:3000/dologin";
this.http.post(url,
JSON.stringify({"username":'zhangsan',"age":'20'}),
{headers:this.headers}).subscribe(function(data){
console.log(data);
},function(error){
console.log(error);
})
}
}