場景

Angular介紹、安裝Angular Cli、創建Angular項目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建組件以及組件之間的調用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通過以上搭建起Angular項目。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

Angular5.x 以后get、post 和和服務器交互使用的是HttpClientModule 模塊。

使用HttpClientModule實現get請求數據

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

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

注入

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

?

2.在用到的地方引入HttpClient 并在構造函數聲明

import {HttpClient} from "@angular/common/http"; constructor(public http:HttpClient) { }

?

3.get請求數據

在用到請求數據的html中添加一個button并添加點擊事件，然后再添加一個ul來顯示獲取到的數據

<button (click) = "getData()">get請求數據</button> <br> <hr><ul><li *ngFor = "let item of list">{{item.title}}</li> </ul>

在ts中首先聲明一個list數組來存儲響應的數據

public list:any[] = [];

然后在按鈕的點擊事件中

? getData(){var api = "http://xxx.com/api/productlist";this.http.get(api).subscribe((response:any) =>{console.log(response);this.list = response.result;});}

其中api是獲取數據的后臺接口，這里數據在響應的result中，所以獲取數據使用response.result

?

然后運行項目，點擊按鈕看效果

?

使用HttpClientModule實現post提交數據

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

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

注入

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

?

2.在用到的地方引入HttpClient 和HttpHeaders并在構造函數聲明HttpClient

import {HttpClient,HttpHeaders} from "@angular/common/http"; constructor(public http:HttpClient) { }

3.post提交數據

為了測試效果搭建一個后臺服務端，這里使用node

搭建node服務端

新建文件夾nodejs_serve,然后在此文件夾下新建兩個文件

?

其中app.js代碼為
?

var express = require('express');var app= express();var bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false }));/*express允許跨域*/app.all('*', function(req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");res.header("X-Powered-By",' 3.2.1')if(req.method=="OPTIONS") res.send(200);else? next(); });//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');

然后package.json代碼為

{"dependencies": {"ejs": "^2.5.6","express": "^4.15.3","socket.io": "^2.0.3","body-parser": "~1.17.1"} }

然后在此目錄下打開cmd輸入

npm install

或者

cnpm install

?

?

安裝依賴完成后運行項目

node app.js

?

然后打開瀏覽器輸入

http://localhost:3000/

看到如下則是項目運行成功

?

post提交數據?

首先在頁面上添加一個按鈕并設置按鈕的點擊事件

<button (click) = "doLogin()">post提交數據</button>

然后在點擊事件多對應的方法中

? doLogin(){const httpOptions = {headers: new HttpHeaders({ 'Content-Type': 'application/json' })};var api = "http://127.0.0.1:3000/doLogin";this.http.post(api,{username:'霸道',age:'24'},httpOptions).subscribe(response => {console.log(response);});}

注意上面headers的書寫方式

然后運行項目點擊按鈕

?

此時查看node服務端控制臺

?

總結

以上是生活随笔為你收集整理的Angular中使用HttpClientModule模块实现get请求数据和post提交数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。