Angular学习之旅----http jsonp请求数据

最新推荐文章于 2022-01-08 18:16:18 发布

瑞朋哥

最新推荐文章于 2022-01-08 18:16:18 发布

阅读量359

点赞数

分类专栏：学习笔记文章标签： angular

本文链接：https://blog.youkuaiyun.com/qfxlw/article/details/83189234

版权

学习笔记专栏收录该内容

124 篇文章

订阅专栏

app.module.ts 中引入 import { HttpModule, JsonpModule } from '@angular/http'; // 引入http jsonp模块

// 这个根模块会告诉angular如何组装该应用
import { BrowserModule } from '@angular/platform-browser'; // 浏览器解析
import { NgModule } from '@angular/core';  // 核心模块
import { HttpModule, JsonpModule } from '@angular/http';  // 引入http jsonp模块
import { FormsModule } from '@angular/forms' //引入表单模块

import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';
import { TodolistComponent } from './components/todolist/todolist.component';  // 自定义的模块

import { StorageService } from './services/storage.service';
/*@NgModule装饰器将AppModule标记为 Angular 模块类（也叫NgModule类）。
 @NgModule接受一个元数据对象，告诉 Angular 如何编译和启动应用。*/
@NgModule({
  declarations: [  /*引入当前项目运行的的组件  自定义组件都需要引入并且在这个里面配制*/
    AppComponent, HeaderComponent, NewsComponent, HomeComponent, TodolistComponent
  ],
  imports: [ /*当前的项目依赖哪些模块*/
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule
  ],
  providers: [StorageService], /*定义的服务  回头放在这个里面*/
  bootstrap: [AppComponent]  /*默认启动那个组件*/
})
/*根模块不需要导出任何东西，   因为其它组件不需要导入根模块。 但是一定要写*/
export class AppModule { }

在news.component.ts import { HttpModule, JsonpModule } from '@angular/http'; // 引入http jsonp模块

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

在请求的requestData方法中

import { Component, OnInit } from '@angular/core';
import { Http, Jsonp } from '@angular/http';
@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  title = '你还news' // 定义属性
  msg: any // 另一种定义属性的方法
  msg1: string = '这是string类型的数据'
  // 定义属性还可以加修饰符
  public username = '张三'
  public h = ''
  public list = []
  public obj = {
    name: '张三'
  }
  public list2 = []
  public list4: any[]
  public list5: any[]
  /**
   * public 共有 * 默认 可以在这个类里面使用，也可以在类外面使用
   * protected 保护类型  他只有在当前类和他的子类里面可以访问
   * private 私有 只有在当前类型才可以访问这个属性
   */
  // 注入依赖服务
  constructor(private http: Http, private jsonp: Jsonp) {
    this.h = '<h2>后台数据</h2>'
    this.list = ['1', '2', '3']
    this.list2 = [
      { 'title': '111' },
      { 'title': '222' },
      { 'title': '333' }
    ]
    this.list4 = [

      {
        'catename': "宝马",

        "list": [

          { 'title': '宝马x1' },
          { 'title': '宝马x3' },
          { 'title': '宝马x2' },
          { 'title': '宝马x4' },
        ]

      }, {
        'catename': "奥迪",

        "list": [

          { 'title': '奥迪q1' },
          { 'title': '奥迪q2' },
          { 'title': '奥迪q3' },
          { 'title': '奥迪q4' },
        ]

      },
    ]
  }

  ngOnInit() {
  }
  requestData() {
    // alert('请求数据')
    var that = this;
    var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
    this.http.get(url).subscribe(function (data) {
      // console.log(JSON.parse(data['_body']))
      var list = JSON.parse(data['_body'])
      that.list5 = list['result']
      console.log(that.list5)
    }, function (err) {
      console.log(err)
    })
  }
}

在渲染组建里news.component.html

<div>
  {{title}}------{{msg1}}-----{{username}}
  <!-- 绑定属性 -->
  <span [title]='msg1'>绑定属性</span>
  <!-- 绑定后台的数据 -->
  <span [innerHtml]="h"></span>
  {{obj.name}}
  <!-- 循环数据 -->
  <ul>
    <li *ngFor="let item of list">{{item}}</li>
  </ul>
  <!-- <ul>
    <li *ngFor="let item of list2;let key=index">{{item.title}}---{{key}}</li>
  </ul> -->
  <ul>
    <li *ngFor="let item of list4;let key=index">{{item.catename}}---{{key}}
      <ol>
        <li *ngFor="let car of item.list">{{car.title}}</li>
      </ol>
    </li>
  </ul>
  <hr>
  <!-- <ul>
    <li template="ngFor let item of list2;let key=index">{{item.title}}---{{key}}</li>
  </ul> -->
  <!-- 不能用 -->
  <!-- <ul>
    <li template="ngFor let item of list5; let key=index">

      {{item.title}}------------{{key}}
    </li>
  </ul> -->
  <hr>
  <h2>请求数据</h2>
  <button (click)="requestData()">请求数据</button>
  <ul>
    <li *ngFor="let item of list5">{{item.title}}</li>
  </ul>
</div>

================================================================================================

jsonp get请求 // jsonp 必须得在url加回到 &callback=JSONP_CALLBACK

import { Component, OnInit } from '@angular/core';
import { Http, Jsonp } from '@angular/http';
@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  title = '你还news' // 定义属性
  msg: any // 另一种定义属性的方法
  msg1: string = '这是string类型的数据'
  // 定义属性还可以加修饰符
  public username = '张三'
  public h = ''
  public list = []
  public obj = {
    name: '张三'
  }
  public list2 = []
  public list4: any[]
  public list5: any[]
  /**
   * public 共有 * 默认 可以在这个类里面使用，也可以在类外面使用
   * protected 保护类型  他只有在当前类和他的子类里面可以访问
   * private 私有 只有在当前类型才可以访问这个属性
   */
  // 注入依赖服务
  constructor(private http: Http, private jsonp: Jsonp) {
    this.h = '<h2>后台数据</h2>'
    this.list = ['1', '2', '3']
    this.list2 = [
      { 'title': '111' },
      { 'title': '222' },
      { 'title': '333' }
    ]
    this.list4 = [

      {
        'catename': "宝马",

        "list": [

          { 'title': '宝马x1' },
          { 'title': '宝马x3' },
          { 'title': '宝马x2' },
          { 'title': '宝马x4' },
        ]

      }, {
        'catename': "奥迪",

        "list": [

          { 'title': '奥迪q1' },
          { 'title': '奥迪q2' },
          { 'title': '奥迪q3' },
          { 'title': '奥迪q4' },
        ]

      },
    ]
  }

  ngOnInit() {
  }
  requestData() {
    // alert('请求数据')
    var that = this;
    var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
    this.http.get(url).subscribe(function (data) {
      // console.log(JSON.parse(data['_body']))
      var list = JSON.parse(data['_body'])
      that.list5 = list['result']
      console.log(that.list5)
    }, function (err) {
      console.log(err)
    })
  }
  requestJsonpData() {
    // alert('请求数据')
    var that = this;
    var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK";
    this.jsonp.get(url).subscribe(function (data) {
      // console.log(JSON.parse(data['_body']))
      console.log(data['_body'])
      // 此处不需要进行字符串解析
      var list = data['_body']
      that.list5 = list['result']
      console.log(that.list5)
    }, function (err) {
      console.log(err)
    })
  }
}