Angular 中的数据交互(get jsonp post)
Angular get 请求数据
Angular5.x 以后 get、post 和和服务器交互使用的是 HttpClientModule 模块。
import {HttpClientModule} from '@angular/common/http';
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 post 提交数据
Angular5.x 以后 get、post 和和服务器交互使用的是 HttpClientModule 模块。
1、在 app.module.ts 中引入 HttpClientModule 并注入
import {HttpClientModule} from '@angular/common/http';
2、在用到的地方引入 HttpClient、HttpHeaders 并在构造函数声明 HttpClient
import {HttpClient,HttpHeaders} from "@angular/common/http";
constructor(public http:HttpClient) { }
3、post 提交数据
const httpOptions = {
headers: new HttpHeaders({ '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);
});
Angular Jsonp 请求数据
1、在 app.module.ts 中引入 HttpClientModule、HttpClientJsonpModule 并注入
import {HttpClientModule,HttpClientJsonpModule} from '@angular/common/http';
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 中的数据交互(get jsonp post)的更多相关文章
- Angular 中的数据交互(get jsonp post)
一.Angular get 请求数据 Angular5.x 以后 get.post 和和服务器交互使用的是 HttpClientModule 模块. 1.在 app.module.ts 中引入 并注入 ...
- hibernate中mysql数据交互中文乱码问题
来源于"http://www.cnblogs.com/jiafuwei/p/4423101.html"; 修改hibernate的配置文件hibernate.cfg.xml,在配置 ...
- vue中的数据监听以及数据交互
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...
- Struts2基本使用(三)--数据交互
Struts2中的数据交互 在Struts2中我们不必再使用request.getParameter()这种方式来获取前台发送到服务器的参数. 我们可以在服务器端的Java类中直接声明一个和前台发送数 ...
- 【原创】xenomai内核解析--xenomai与普通linux进程之间通讯XDDP(三)--实时与非实时数据交互
版权声明:本文为本文为博主原创文章,转载请注明出处.如有问题,欢迎指正.博客地址:https://www.cnblogs.com/wsg1100/ 目录 1.概述 1.概述 [原创]实时IPC概述 [ ...
- Angular - - $resource 更高端的数据交互
$resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js ...
- Angular中的jsonp
1.一般我们使用Angualr中的jsonp值这样使用的:注入$http服务 这样使用jsonp的方式可以支持多数api,但是douban不支持无法使用 module.controller('InTh ...
- angularJs中自定义directive的数据交互
首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...
- get,post,jsonp数据交互—百度下拉列表
三种数据交互形式:get post jsonp 一.get请求 1.引入 vue.js 和 vue-resource.js , 准备一个按钮 <input type="button& ...
随机推荐
- laravel的日志权限
命令行脚本运行时报错 UnexpectedValueException : The stream or file "/Data/PMS/storage/logs/laravel-2019- ...
- python基础的学习
今日内容 1.常见操作系 1.win win7 win10 window serrer 2.linux centons 图像界面差 upuntu 个人开发(图形化较好) redhat 企业 3.mac ...
- bug和注意事项
bug: 1.新增角色,在选择权限树的时候,如果不选择根目录下的第一个节点,保存后,权限树会打不开. 2.文档页面有两个大字段,即ueditor编辑器的时候,保存后回显会有问题 不过一个页面有两个大文 ...
- MySql 外键重名问题
在使用mysql workbench 来设计数据库模型时可能一不注意就会出现外键约束重名的情况,并在执行sql语句是会报这样的错误: Error 1022 - Can't write; duplica ...
- awk命令使用经验
1.为什么要使用awk 举一个简单的例子,作为一个java开发人员,在查看日志服务器(即时保存所有线上环境的日志)上的日志的时候,由于部署了服务的服务器不止一台,当想要查找某一个特定信息的时候,由于不 ...
- python练习题-day24
1.单继承 class Animal: def __init__(self,name,hp,aggr): self.name=name self.hp=hp self.aggr=aggr def ea ...
- Linux主机之间ssh免密登录配置方法
由于公司的生产环境有很多台Linux的CentOS服务器, 为了方便机子(假设两台机子A,B)互相之间免密ssh, scp命令操作,配置如下 1. 在A.B上分别创建本机的公钥和私钥,输入命令后连续三 ...
- DAX/PowerBI系列 - 玩转阿里云 Alicloud Pricing
DAX/PowerBI系列 - 玩转 阿里云主机 Ali Cloud ECS 难度: ★★☆☆☆(1星) 适用范围: ★★★☆☆(3星) 欢迎交流与骚扰 这是啥: 双十一就到了,码农门,程序猿们有没有 ...
- openssh-win64 on windows2016 ssh pub key config
DO NOT follow the official M$ documentation at https://docs.microsoft.com/en-us/windows-server/admin ...
- 监听器----java
监听器简介: 1 什么是web监听器? web监听器是一种Servlet中的特殊的类,它们能帮助开发者监听web中的特定事件,比如ServletContext,HttpSession,ServletR ...