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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
jQuery 入门讲解1
Apr 15 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
JS数组索引检测中的数据类型问题详解
Jan 11 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多用户计数器代码
2007/03/11 PHP
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
python实现手机通讯录搜索功能
2018/02/22 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
电钳专业个人求职信
2014/01/04 职场文书
投资协议书范本
2014/04/21 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
办公经费申请报告
2015/05/15 职场文书
亮剑观后感300字
2015/06/05 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python