Angular数据请求（get,post）

时间：2020-07-05 11:45:20 阅读：64 评论：0 收藏：0 [点我收藏+]

一、Angular get请求数据

Angular5.x以后get, post和和服务器交互使用的是HttpClientModule模块。

1、在app.module.ts中引入HttpClientModule并注入

import {HttpClientModule} from ‘@angular/common/http‘

imports:[
    BrowserModule,
    HttpClientModule
]

2、在用到的地方引入HttpClient并在构造函数声明

import {HttpClient} from "@angular/common/http";

constructor(public http:Httpclient) {}

3. get请求数据

var url= "http://127.0.0.1:8080/api/productlist";
this.http.get(url).subscribe (response =>{
    console.log(response);
})

二、Angular post提交数据

Angular5.x以后get, post和和服务器交互使用的是HttpClientModule模块。

1、在app.module.ts中引入HttpClientModule注入

import {HttpClientModule} from ‘@angular/common/http‘

imports:[
    BrowserModule,
    HttpClientModule
]

2、在用到的地方引入HttpClient、HttpHeaders并在构造函数声明HttpClient

import {HttpClient, HttpHeaders} from "@angular/common/http";

constructor(public http:Httpclient) {}

3, post提交数据

var url="http://127.0.0.1:8080/doLogin";

this.http.post(url, {"age":22,"username":"zl"})
  .subscribe((response)=>{
    console.log(response)
  })

三、Angular Jsonp请求数据

1、在app.module.ts中引入HttpClientModule, HttpClientJsonpModule并注入

import {HttpClientModule,HttpclientJsonpModule} from@angular/common/http‘;

imports:[
    BrowserModule,
    HttpClientModule,
    HttpClientJsonpModule
]

2、在用到的地方引入httpClient并在构造函数声明

import {HttpClient} from "@angular/common/http";

3, post提交数据

var url="http://127.0.0.1:8080/doLogin";

this.http.jsonp(url,"callback").subscribe((response:any)=>{
  this.userList=response;
  console.log(response)
})

四、Angular中使用第三方模块axios请求数据

1、安装axios

cnpm install axios --save

2、用到的地方引入axios

import axios from ‘axios";

3,get请求

var url= "http://127.0.0.1:8080/api/productlist";
axios.get(url)
    .then(function (response){
      console.log(response)
　　)}

原文：https://www.cnblogs.com/zhulei2/p/13235366.html

踩

(0)

评论一句话评论（0）

分享档案

更多>