场景

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提交数据相关推荐

Python中通过requests模块发送POST请求.
博客核心内容: 1.Python中通过requests模块发送POST请求. 我们通常情况下提交数据一般有两种方式:Ajax和Form表单的方式如果request.post里面没有值,我们就到req ...
在node中使用request模块和superagent请求接口
1.通过request请求接口首先是get请求的使用,如下: request({url: 'address',method: 'GET' //get大小写都可以 }, (err, res, data ...
作业1：关于使用python中scikit-learn(sklearn)模块，实现鸢尾花（iris）相关数据操作（数据加载、标准化处理、构建聚类模型并训练、可视化、评价模型）
操作题:利用鸢尾花数据实现数据加载.标准化处理.构建聚类模型并训练.聚类效果可视化展示及对模型进行评价一.数据加载 from sklearn.datasets import load_iris fr ...
表单提交中Get和Post方式的区别及EncType表明提交数据的格式详解
表单提交中Get和Post方式的区别 1. get是从服务器上获取数据,post是向服务器传送数据. 2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对 ...
Angular中使用axios实现get请求数据
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
pythonrequests发送数据_在python中使用requests 模拟浏览器发送请求数据的方法
在python中使用requests 模拟浏览器发送请求数据的方法如下所示: import requests url='http://####' proxy={'http':'http://#### ...
Django中Ajax提交数据的CSRF问题
错误信息: Forbidden (CSRF token missing or incorrect.): 什么是CSRF: django为用户实现防止跨站请求伪造的功能,通过中间件 django.mid ...
Angular中ngCookies模块介绍
1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...
【Angular中的HTTP请求】- 拦截器 HttpInterceptor 详解
通过学习 HttpClient 的工作机制 ,我们知道对于HTTP请求,HttpClient 实际上是构建了一个链式的处理流程: 在HttpBackend的处理流程中请求被发出.在HttpBacken ...

Angular中使用HttpClientModule模块实现get请求数据和post提交数据

场景

实现

使用HttpClientModule实现get请求数据

使用HttpClientModule实现post提交数据

搭建node服务端

post提交数据

Angular中使用HttpClientModule模块实现get请求数据和post提交数据相关推荐

最新文章

热门文章