Angular学习之旅----post请求

先设置请求头import { Http, Jsonp, Headers } from '@angular/http';

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

postData() {

// 1.import { Http,Jsonp,Headers } from '@angular/http'; Headers 定义请求头的

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

//3.post提交数据

var url = "http://127.0.0.1:3000/dologin";

this.http.post(url,

JSON.stringify({ "username": 'zhangsan', "age": '20' }),

{ headers: this.headers }).subscribe(function (data) {

console.log(data);

}, function (error) {

console.log(error);

})

}

 

import { Component, OnInit } from '@angular/core';
import { Http, Jsonp, Headers } 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[]
  private headers = new Headers({ 'Content-Type': 'application/json' })
  /**
   * 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)
    })
  }
  postData() {
    // 1.import { Http,Jsonp,Headers } from '@angular/http';   Headers 定义请求头的
    //2.private headers = new Headers({'Content-Type': 'application/json'});
    //3.post提交数据
    var url = "http://127.0.0.1:3000/dologin";
    this.http.post(url,
      JSON.stringify({ "username": 'zhangsan', "age": '20' }),
      { headers: this.headers }).subscribe(function (data) {
        console.log(data);
      }, function (error) {
        console.log(error);
      })
  }
}

<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()">http get请求数据</button>
  <button (click)="requestJsonpData()">jsonp get请求数据</button>
  <button (click)="postData()">post提交数据</button>
  <ul>
    <li *ngFor="let item of list5">{{item.title}}</li>
  </ul>
</div>