Angula中的数据交互

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 api = "http://a.itying.com/api/productlist";
this.http.get(api).subscribe(response => { console.log(response);
});

Angular pot提交数据

1、pot提交数据（和get请求数据的前两步是一样的不重复写了）

consthttpOptions={ headers:newHttpHeaders({'Content-Type':'application/json'})};var api="http://127.0.0.1:3000/doLogin";    this.http.post(api,{username:'张三',age:'20'},httpOptions).subscribe(response=>{ console.log(response); });

AngularJsonp 请求数据

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";
constructor(public http:HttpClient) { }

3、jsonp 请求数据

var api = "http://a.itying.com/api/productlist"; this.http.jsonp(api,'callback').subscribe(response => { console.log(response);
});

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

1、安装 axios

cnpm install axios--save

2、用到的地方引入 axios

import axios from'axios';

3、看文档使用

axios.get('/user?ID=12345')
.then(function(response){ //handle success console.log(response);
})
.catch(function(error){ //handle error console.log(error); })
.then(function(){ //always executed
});

Angula中的数据交互相关推荐

Vue中的数据交互axios
数据交互 ajax: 原理必须要能说出来流程即可. jquery_ajax. 我们promise要结合它 Promise + async函数的前端的主要工作:1. 画页面.2. 请求ajax (后端 ...
15_心理咨询_微信小程序项目实战_数据交互_首页
前置把十方智育的图片资源.视频资源等都放在json-server的public目录下面的指定文件夹中: public json-server的静态资源目录 ...
ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递
本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧前言最近公司项目进行架构调整,由原来的三层架构改 ...
ajax数据交互代码,Django中使用jquery的ajax进行数据交互的实例代码
jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择最终实现效果如图: 将jque ...
QML笔记-使用connect界面数据交互（qml中Designer使用）
程序运行截图如下: 点击右边的sender 左边会接收到数据: 多次点击后: 这里关键是记录两点: 1. 是qml界面不同控件数据的传输 2. 使用设计器完成简单的qml控件设计先来记录下qml中D ...
ajax与后台php,怎么在thinkPHP5中使用ajax实现与后台数据交互
怎么在thinkPHP5中使用ajax实现与后台数据交互发布时间:2021-03-20 17:20:01 来源:亿速云阅读:87 作者:Leah 这篇文章给大家介绍怎么在thinkPHP5中使用a ...
java cookie能存到服务器_Cookie技术用于将会话过程中的数据保存到( )中,从而使浏览器和服务器可以更好地进行数据交互。(5.0分)_学小易找答案...
[单选题]下列选项中,用于对超链接和form表单中的action属性中设置的URL进行重写的方法是(5.0分) [判断题]安装好Tomcat后,就可以直接启动运行了,并不要先安装JDK.(5.0分) ...
SNS游戏中社区Server和游戏Server一种数据交互的策略
SNS游戏和MMO类的游戏最大的区别是不分在线和离线状态.SNS游戏中存在大量的某个角色对另外一个离线角色交互. 我们拿农场类游戏举例.像偷菜之类的功能都在社区Server(SS)中实现.偷菜之外,我 ...
SNS 游戏中社区 Server 和游戏 Server 一种数据交互的策略
SNS游戏和MMO类的游戏最大的区别是不分在线和离线状态.SNS游戏中存在大量的某个角色对另外一个离线角色交互. 我们拿农场类游戏举例.像偷菜之类的功能都在社区Server(SS)中实现.偷菜之外,我 ...