Angular4 使用GET向后端请求数据

本文介绍如何在Angular4中使用HTTP和JSONP模块发起GET请求从后端获取数据。包括如何配置项目、注入依赖以及在组件中实现具体的请求逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Angular4 使用GET向后端请求数据


  • 在工程的src/app/app.module.ts的头部引入http、jsonp:
     

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

     

  • 在工程的src/app/app.module.ts的imports下注入依赖:
     

    HttpModule,JsonpModule

     

  • 在需要用到请求的组件中要再次引入,本次的引入同app.module.ts中的引入名称不完全一致,但是同一个东西:
     

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

     

  • 在构造方法中实例化对象:
     

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

    然后在本组件中就可以使用了:this.http.get(url)xxxxx

  • 使用GET方法向后台请求数据的方法是:
     

    reqData(){ // 向后台请求数据
        var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";//视频教程中的测试用请求地址
    ​
        // 后面的异步请求中不可直接使用this,在异步中使用的this
        // 和这里的this不同
        var _that = this;
    ​
        this.http.get(url).subscribe(function(data){//请求成功的回调函数
          _that.list = JSON.parse(data['_body']);
          _that.list =_that.list['result'];
          
        },function(err){// 请求失败的回调函数
          console.log(err);
        })
      }

     

  • 使用jsonp请求数据的方法是:
     

    reqJsonp(){ // 向后台请求数据
        var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK";//视频教程中的测试用请求地址
    ​
        var _that = this;
        // console.log(_that);
    ​
        this.jsonp.get(url).subscribe(function(data){//请求成功的回调函数
          _that.list =data['_body']['result'];
          
        },function(err){// 请求失败的回调函数
          console.log(err);
        })
      }

     

  • 前端的HTML文件中的调用方法是:
     

    <button (click)="reqData()">使用http获取数据</button>

     

  • 下面是整个项目的打包的源码,项目使用了Node.js v10.7.0,Angular CLI:6.1.1
    https://download.youkuaiyun.com/download/chanchaw/10584431

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值