,1,创建一个服务
//创建一个服务文件
http.service.ts
里面的代码
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class myHttpService {
constructor(private http: Http) { }
//向myUrl所对应的服务器发起请求
sendRequest(myUrl:string){
//创建get请求路径通过参数来传
return this.http.get(myUrl)
.map((response: Response) => response.json());
}
}
2,html界面
//列表接收数据
<ul>
<li *ngFor="let item of dataList">
标题:{{item.title}}——价格:{{item.price}}
</li>
</ul>
//通过点击button来获取数据
<button (click)='getData()'>获取数据</button>
3,component中
//引入服务
import { myHttpService} from './http.service';
//创建接收数据的数组
dataList:Array<any>=[];
//click事件中的方法
getData(){
//因为服务器端口不一样,涉及到跨域访问所有需要在PHP头部加入头部
//header("Access-Control-Allow-Origin:*");
this.myHttp.sendRequest("http://127.0.0.1/111/emp.php")
.subscribe((result:any)=>{
this.dataList=result
});
}
4,要使用http请求,需要在app.module.中引入
import { HttpModule} from '@angular/http';
import { myHttpService} from './demo14/http.service';
providers:[myHttpService],
imports: [HttpModule]