2018年7月22日

1. http访问请求json数据

请求json数据格式如下：

{
    "result": [
        {
            "aid": "501",
            "catid": "8",
            "username": "admin",
            "title": "nodejs【全栈】【人工智能】 视频教程下载",
            "pic": ""
        },
        {
            "aid": "489",
            "catid": "8",
            "username": "admin",
            "title": "cordova常用命令大全/phonegap命令大全",
            "pic": ""
        },
        {
            "aid": "328",
            "catid": "8",
            "username": "admin",
            "title": "phonegap桌面开发工具视频教程-不搭建环境就可以开发phonegap app ...",
            "pic": "portal/201501/11/200317ne0ki707lkinl69e.png"
        },
        {
            "aid": "36",
            "catid": "8",
            "username": "admin",
            "title": "HTML5 Canvas  制作一个“在线画板” 视频教程（第六讲）",
            "pic": "portal/201307/24/214740o6em58som6i60e90.png"
        }
    ]
}

2. app.module.ts引入 HttpModule 、JsonpModule

    import { HttpModule, JsonpModule } from '@angular/http';
...
imports: [
 BrowserModule,
 FormsModule,
 HttpModule,
 JsonpModule,
 AppRoutingModule
 ],

3. 在需要请求数据的地方引入 Http,Jsonp

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

4. 构造函数内申明：

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

5.get和jsonp请求的写法：

 getMsg(){
    var _that = this;
    this.http.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1")
 .subscribe(
 function(data){
 //需要自己解析数据
   _that.list=JSON.parse(data['_body']).result;
 },function(err){
 console.log('失败');
 }
 );
  }

  jsonpMsg(){
    var _that = this;
   //注意拼接callback=JSONP_CALLBACK this.jsonp.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK")
 .subscribe(
 function(data){
   console.log(data);
   //跨域返回json格式数据，不需要解析
   _that.list=data['_body']['result'];
 },function(err){
 console.log('失败');
 }
 );
  }

6.post请求数据写法，注意三个参数

  postMsg(){
    var _that = this;
    this.http.post("http://baidu.com",JSON.stringify({username: 'admin'}), {headers:this.headers})
 .subscribe(
 function(data){
   console.log(data.json());
  // _that.list=JSON.parse(data['_body']).result;
 },function(err){
 console.log('失败');
 }
 );
  }

标签：angularjs