angular4.x请求数据2018-07-16

一、JSONP 服务

1、app.module.ts注入HttpModule 、JsonpModule

app.module.ts

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

//引入依赖模块

  imports: [

    HttpModule,//Http请求数据

    JsonpModule,//Jsonp请求数据

  ]

2、在需要请求数据的ts注入

.ts

import {Http,Jsonp} from "@angular/http";

public list=[]; // 实例化头部 private headers = new Headers({'Content-Type': 'application/json'});

constructor(private http:Http,private jsonp:Jsonp) { }//构造函数内申明

// 使用jsonp请求,后面添加&callback=JSONP_CALLBACK jsonpRequestData(){

var _this=this let url="http://127.0.0.1:3000/home?&callback=JSONP_CALLBACK"; this.jsonp.get(url).subscribe(function(data){

let dataList=data['_body'];

_this.list=dataList;

},function(err){

// console.log(err); })

}

.html

<button (click)="jsonpRequestData()">http请求数据</button>

<ul>

    <li *ngFor="let item of list">{{item.msg}}</li>

</ul>

3、用node.js写一个后台

app.js

var express = require('express');

var app=express();

var bodyParser = require('body-parser');

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: false }));

//app.use(express.static(path.join(__dirname, 'public')));

app.get('/',function(req,res){

res.send('首页');

})

app.get('/news',function(req,res){

//console.log(req.body);

res.jsonp({"msg":'这是新闻数据'});

})

app.get('/home',function(req,res){

//console.log(req.body);

//res.jsonp({"msg":'这是home数据',"name":"zhangsan","user":"admin","password":"123"});

res.jsonp([

{"msg":'这是home数据1',"name":"zhangsan"},

{"msg":'这是home数据2',"name":"zhangsan"},

{"msg":'这是home数据3',"name":"zhangsan"},

{"msg":'这是home数据4',"name":"zhangsan"},

{"msg":'这是home数据5',"name":"zhangsan"}

])

})

app.listen(3000,'127.0.0.1');

//打印

console.log('Server running at http://127.0.0.1:3000/');