Angular 数据请求的实现方法


Posted in Javascript onMay 07, 2018

使用 Angular 请求数据的时候,需要引入 HttpModule 模块,如果使用的 jsonp 模式的话,则需要另外引入 JsonpModule 模块

import { HttpModule, JsonpModule } from '@angular/http'

然后在当前模块中的 imports 内进行注册

imports: [
 HttpModule,
 JsonpModule
],

注册以后就可以在组件文件当中引入相对应的方法来进行数据请求了

import { Http, Jsonp } from '@angular/http'

然后在当前组件的构造函数当中进行注入以后就可以使用了

constructor(private http: Http, private jsonp: Jsonp) { }

使用如下,一个简单的 get 请求

// 进行注入,拿到相对应的方法
constructor(private http: Http, private jsonp: Jsonp) { }
public list: any = []
// 请求数据
getData() {
 let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
 let _this = this
 this.http.get(url).subscribe((data) => {
  _this.list = JSON.parse(data['_body'])['result']
  console.log(_this.list)
 })
}

前台进行渲染即可

<button (click)="getData()">get 请求数据</button>
<ul>
 <li *ngFor="let item of list">
  {{item.title}}
 </li>
</ul>

JSONP 请求数据

注意区分与 get 请求的区别,使用如下

// 请求数据
jsonpData() {
 let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK'
 let _this = this
 this.jsonp.get(url).subscribe((data) => {
  _this.list = data['_body']['result']
  console.log(_this.list)
 })
}
// 渲染
<button (click)="jsonpData()">jsonp 请求数据</button>
<ul>
 <li *ngFor="let item of list">
  {{item.title}}
 </li>
</ul>

不同点

请求的 url 参数结尾必须要添加指定的回调函数名称 &callback=JSONP_CALLBACK

请求的方式变为 this.jsonp.get(url)

请求后得到的数据格式不统一,需要自行进行调整

POST 请求

与 GET 的请求方式有些许不同,首先需要引入请求头 { Headers }

import { Http, Jsonp, Headers } from '@angular/http'

然后来对请求头进行定义,需要先实例化 Headers

private headers = new Headers({'Content-Type': 'application/json'})

最后在提交数据的时候带上 Headers 即可

postData() {
 let url = 'http://localhost:8080/login'
 let data = {
  "username": "zhangsan",
  "password": "123"
 }
 this.http.post(
  url,
  data,
  {headers: this.headers}
 ).subscribe((data) => {
  console.log(data)
 })
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
JavaScript数组去重算法实例小结
May 07 #Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 #Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 #Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 #Javascript
Vue 实现树形视图数据功能
May 07 #Javascript
JavaScript 跨域之POST实现方法
May 07 #Javascript
ES6关于Promise的用法详解
May 07 #Javascript
You might like
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
php表单处理操作
2017/11/16 PHP
PHP多进程简单实例小结
2019/11/09 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
JS实现div居中示例
2014/04/17 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
js实现进度条的方法
2015/02/13 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python获取标准北京时间的方法
2015/03/24 Python
用实例解释Python中的继承和多态的概念
2015/04/27 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
详解python中的文件与目录操作
2017/07/11 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
自我鉴定书范文
2013/10/02 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
《实心球》教学反思
2016/02/23 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang
5道关于python基础 while循环练习题
2021/11/27 Python
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android