[转]Angular4 数据请求 POST、GET
本文转自:https://blog.csdn.net/dailuwen/article/details/79375980
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dailuwen/article/details/79375980
创建项目
ng new OBJECT_NAME
创建一个名为 httpRequest 的服务
ng generate service httpRequest
在app.module.ts 里面添加
providers : [HttpRequestService]
HttpRequestService.ts 文件
import { Injectable, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable()
export class HttpRequestService {
httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json;application/x-www-form-urlencodeed; charset=utf-8'})
};
constructor(private httpClient : HttpClient) { }
httpPost(reqUrl : string, reqBody, comp, flag) {
//后台接收数据 需要 @RequestBody 标签
this.httpClient.post(reqUrl, reqBody, this.httpOptions)
.subscribe(
val => {
console.log('post请求成功', val);
if(val['success']){
comp.postOk(val, flag);
}else{
comp.postErr(val, flag);
}
},
error => {
console.log('post请求失败', error);
comp.postErr(error, flag);
}
);
}
httpGet(reqUrl, comp, flag){
this.httpClient.get(reqUrl, this.httpOptions)
.subscribe(
val => {
console.log('get请求成功', val);
if(val['success']){
comp.getOk(val, flag);
}else{
comp.getErr(val, flag);
}
},
error => {
console.log('get请求失败', error);
comp.getErr(error, flag);
}
);
}
show() : string {
return '我是 HttpRequestService 调用我干嘛';
}
}
创建一个名为 sku-from 的组件
ng g component sku-from
sku-form.component.html 文件
<div>
sku-form works!
<form #skuForm="ngForm" (ngSubmit)="onSubmit(skuForm)">
<div class="form-group">
<label for="name">货品代码</label>
<input type="text" class="form-control" [(ngModel)]="skuInfo.sku" name="sku" required minlength="4" />
</div>
<div class="form-group">
<label for="alterEgo">货品描述</label>
<input type="text" class="form-control" [(ngModel)]="skuInfo.descr" name="descr" required />
</div>
<br/>
<button type="button" nz-button [nzType]="'dashed'" (click)="newSku()">new sku</button>
<button type="submit" nz-button [nzType]="'primary'">Submit</button>
</form>
</div>
sku-form.component.ts文件
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import {HttpRequestService} from '../httpRequest.service'
import {Sku} from './../sku';
@Component({
selector: 'app-sku-form',
templateUrl: './sku-form.component.html',
styleUrls: ['./sku-form.component.css']
})
export class SkuFormComponent implements OnInit {
private api_sku_save = 'http://localhost:8081/sino-web/bas/sku/saveDetails';
private skuInfo : Sku = new Sku(1, '0000000000010', '红牛', new Date());
private skuForm : FormGroup;
reqsuccess : boolean;
reqsuccessMsg : string;
constructor(private httpRequestService : HttpRequestService) {
this.createForm();
}
ngOnInit() { }
createForm(){
this.skuForm = new FormGroup({
sku : new FormControl(this.skuInfo.sku, Validators.minLength(7)),
descr : new FormControl(this.skuInfo.descr, Validators.required)
});
}
newSku(){
this.skuInfo = new Sku(null, '', '', null);
}
onSubmit(formData) {
/**
* valid:是否有效、 invalid:无效、dirty:脏\status:状态、errors:显示错误
*/
if(formData.form.valid){
this.httpRequestService.httpPost(this.api_sku_save, this.skuInfo, this, 'save');
}
}
postOk (val, flag){
this.reqsuccess = true;
this.reqsuccessMsg = '';
}
postErr (val, flag){
this.reqsuccess = false;
this.reqsuccessMsg = val['msg'];
console.log(val);
}
}
创建一个名为 sku的类
ng g generate class Sku
sku.ts文件
export class Sku {
constructor(
public id : number,
public sku : string,
public descr : string,
public createdAt : Date
){}
}
---------------------
作者:戴子
来源:CSDN
原文:https://blog.csdn.net/dailuwen/article/details/79375980
版权声明:本文为博主原创文章,转载请附上博文链接!
[转]Angular4 数据请求 POST、GET的更多相关文章
- Ajax --- 数据请求
下面主要介绍(JS原生)数据请求的主要步骤: Ajax 数据请求步骤: 1.创建XMLHttpRequest对象 2.准备数据发送 3.执行发送 4.指定回掉函数 第一步:创建XMLHttpReque ...
- 携带cookie进行数据请求
前端进行数据请求有:普通的ajax(json)请求,jsop跨域请求,cors跨域请求,fetch请求...PC端这些请求方式中,普通的ajax(json)请求和jsop跨域请求是默认携带cookie ...
- XML 数据请求与JSON 数据请求
(1)XML 数据请求 使用 AFNetworking 中的 AFHTTPRequestOperation 和 AFXMLParserResponseSerializer,另外结合第三方框架 XMLD ...
- 使用 AFNetworking 进行 XML 和 JSON 数据请求
(1)XML 数据请求 使用 AFNetworking 中的 AFHTTPRequestOperation 和 AFXMLParserResponseSerializer,另外结合第三方框架 XMLD ...
- iOS - NetRequest 网络数据请求
1.网络请求 1.1 网络通讯三要素 1.IP 地址(主机名): 网络中设备的唯一标示.不易记忆,可以用主机名(域名). 1) IP V4: 0~255.0~255.0~255.0~255 ,共有 2 ...
- iOS开发——网络Swift篇&NSURL进行数据请求(POST与GET)
NSURL进行数据请求(POST与GET) 使用Swift进行iOS开发时,不可避免的要进行远程的数据获取和提交. 其数据请求的方式既可能是POST也可能是GET.同不管是POST还是GET又可以 ...
- ASP.NET问题处理---“数据请求超时错误“”
数据请求超时,一般有2中解决方式: 1.页面AJAX处理数据时延长时间: 2.后台数据库连接取数据时延长时间. 由于我的后台数据库连接取数据为循环读取数据,所以不存在超时问题,这里具体说说如何修改AJ ...
- VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求
开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...
- 微信小程序数据请求方法wx.request小测试
微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...
随机推荐
- U-Boot Makefile分析(1)配置脚本mkconfig分析
我们在编译U-Boot之前,需要根据当前使用的板子进行配置,例如make s5p_goni_config,接着才能进行编译make.下面首先分析配置阶段U-Boot做了哪些事情. 由于执行这些命令是在 ...
- Django 执行单独脚本及SyntaxError缩进报错解决
有时候会碰到这样的场景,对于一些业务升级,我需要把数据库数据做些处理,同时又想以 Django 项目的环境变量执行脚本,这个时候使用 python 脚本是再适合不过的手段了. 注意:在pycharm里 ...
- Python编程练习:编程实现恺撒密码
问题描述:凯撒密码是古罗马凯撒大帝用来对军事情报进行加解密的算法,它采用了替换方法对信息中的每一个英文字符循环替换为字母表序列中该字符后面的第三个字符,即,字母表的对应关系如下: 原文:A B C D ...
- [Postman]请求(6)
您可以从以下位置创建并保存请求: 工作区构建视图 新按钮 启动屏幕 使用新按钮 在标题工具栏中,单击“ 新建”按钮. 出现“新建”屏幕. 在SAVE REQUEST屏幕中: 输入您的请求的标题和说明. ...
- python 输入一个字符串,打印出它所有的组合
import itertools str = input('请输入一个字符串:') lst = [] for i in range(1, len(str)+1): lst1 = [''.join(x) ...
- swiper在vue项目中的循环轮播bug以及点击事件
一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播.自动播放都比较正常. 但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽. ...
- Spring Cloud Alibaba Sentinel 整合 Feign 的设计实现
作者 | Spring Cloud Alibaba 高级开发工程师洛夜 来自公众号阿里巴巴中间件投稿 前段时间 Hystrix 宣布不再维护之后(Hystrix 停止开发...Spring Cloud ...
- Linux下安装、启动、停止mongodb
1.下载完安装包,并解压 tgz(以下演示的是 64 位 Linux上的安装) curl .tgz # 下载 tar .tgz # 解压 mv mongodb/ /usr/local/mongodb ...
- 程序员周末阿里面试,5分钟就被一道题秒杀:HashMap与Hashtable
你们可能会想,我这么菜的吗?5分钟都坚持不了? 本文说起来会有点尴尬,毕竟这是我曾经经历过的故事 那时候的我还真菜,每天写着 if/ for 及一些简单的业务逻辑代码,虽工作有些日子了,但技术水平还停 ...
- maven下载其源代码包并关联
有时我们的源码可能会失去关联,然后需要我们在当前项目中(含有pom.xml文件的那个目录)按住shift然后在当前项目文件夹空白处右键,选择在此处打开命令输入一下命令: 1. 下载所有在POM中的的s ...