Angular 请求数据 get post 以及 jsonp 请求数据

---

 引入 HttpModule 、JsonpModule

普通的 HTTP 调用并不需要用到 JsonpModule，不过稍后我们就会延演示对 JSONP 的支持，所以现在就加载它，免得再回来浪费时间。

引入模块

import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';

　　

 在 import 中注入模块

  imports: [BrowserModule,AppRoutingModule,FormsModule,HttpClientJsonpModule,HttpClientModule],

　　

 在使用文件引用

import {HttpClient,JsonpClientBackend} from '@angular/common/http'

　　

在构造函数中声明

  constructor(private http:HttpClient,private jsonp:JsonpClientBackend) {}

　　

HTTP 请求GET数据

  /***请求数据 */requestData(){var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1"this.http.get(url).subscribe(function(data){// 如果请求成功运行此代码
      console.log(data)},function(err){// 如果请求失败运行此代码
      console.log(err)})}

返回的数据格式为 json 字符串。

解析获取的数据

 ts 文件

import { Component, OnInit } from '@angular/core';
import { HttpClient, JsonpClientBackend } from '@angular/common/http'@Component({selector: 'app-mdata',templateUrl: './mdata.component.html',styleUrls: ['./mdata.component.css']
})
export class MdataComponent implements OnInit {  public list: any;constructor(private http: HttpClient, private jsonp: JsonpClientBackend) {}ngOnInit() {}/***请求数据 */requestData() {var _that = this;var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1"this.http.get(url).subscribe(function (data) {// 如果请求成功运行此代码// console.log(data)// 将json字符串转换为json对象 这个网址在请求的时候是对象，不必转换// console.log(JSON.parse(data))_that.list = data['result'];console.log(_that.list)}, function (err) {// 如果请求失败运行此代码
      console.log(err)})}

}

　　

html 文件

<h2>请求数据</h2><button  (click)="requestData()">请求数据</button><ul><li *ngFor="let item of list" >{{item.title}}</li>
</ul>

 　　

 

HTTP 请求Post数据

和GET请求一样，引入模块等一系列操作...

引入 headers 模块

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

　　

设置请求头

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

　　

使用 POST 请求数据

 　　请求的后台是自己用node.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.post('/dologin',function(req,res){

    console.log(req.body);

     res.json({"msg":'post成功'});



})

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

    //console.log(req.body);

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

})




app.listen(3000,'127.0.0.1');

 

ts 文件

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'@Component({selector: 'app-mdata',templateUrl: './mdata.component.html',styleUrls: ['./mdata.component.css']
})
export class MdataComponent implements OnInit {public list: any;private headers = new HttpHeaders({'Content-Type': 'application/json'});constructor(private http: HttpClient) {}ngOnInit() {}/***请求数据 */requestData() {var _that = this;// HTTP 请求数据var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1"this.http.get(url).subscribe(function (data) {// 如果请求成功运行此代码// console.log(data)// 将json字符串转换为json对象 这个网址在请求的时候是对象，不必转换// console.log(JSON.parse(data))_that.list = data['result'];console.log(_that.list)}, function (err) {// 如果请求失败运行此代码
      console.log(err)})}postData(){//  HTTP POST 请求var url="http://127.0.0.1:3000/dologin"this.http.post(url,JSON.stringify({"username":"zhangsan"}),{headers:this.headers}).subscribe(function(data){console.log(data)},function(err){console.log(err)})return false;}}

 

html 文件

<h2>请求数据</h2><button  (click)="requestData()">请求get数据</button>
<br><br>
<button  (click)="postData()">请求post数据</button><ul><li *ngFor="let item of list" >{{item.title}}</li>
</ul>

　　

Jsonp 请求数据

　　因为太懒，懒得写了，之后有机会在写....