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实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
Weex开发之地图篇的具体使用
Oct 16 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 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 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
Python调用命令行进度条的方法
2015/05/05 Python
Python实现针对中文排序的方法
2017/05/09 Python
Django中Model的使用方法教程
2018/03/07 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
干部行政关系介绍信
2014/01/17 职场文书
行政内勤岗位职责
2014/04/07 职场文书
霸气队列口号
2014/06/18 职场文书
故宫的导游词
2015/01/31 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
自荐信大全
2019/03/21 职场文书