从Angular 2向Codeigniter的Http中的JSON输入意外结束

问题描述

带有Codeigniter Hello World程序的Angular 2可以完美运行.但我从Angular 2向Codeigniter控制器"Entry.php"发送Http获取请求时收到错误"JSON输入意外结束"在此链接上有Plunker代码:

Angular 2 with Codeigniter Hello World Program running perfectly. ButI am getting error "Unexpected end of JSON input" while sending Http get request from Angular 2 to Codeigniter Controller "Entry.php"Plunker code is at this link:

https://plnkr.co/edit/MHVVkWwFqEggqSI5b6B2?p=info

相同的代码也粘贴在这里: app.module.ts

Same code is pasted here also: app.module.ts

import { NgModule }            from '@angular/core';
import { BrowserModule }       from '@angular/platform-browser';
import { HttpModule } from "@angular/http";
import { AppComponent }        from './app.component';
import { EntryService }        from './entry.service';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule
  ],
  declarations: [
    AppComponent
  ],
  exports: [ // export for the DemoModule
    AppComponent
  ],
  providers: [ EntryService], 
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.ts

app.component.ts

import { Component, OnInit} from '@angular/core';
import { EntryService} from './entry.service';

@Component({  
  selector: 'my-app',
  template: `
      <h3>{{ errorMsg }} </h3>      
      <ul>
          <li *ngFor="let s of scripts">{{ s.price }}</li>
      </ul>
  `,
})

class formEntry{  
  constructor(price: number, qty: number){}    
}
export class AppComponent implements OnInit{

    errorMsg: string;
    data: formEntry;
    constructor(private _entService: EntryService) { }

    ngOnInit()
    {
        console.log('In OnInit: ');        
        this._entService.getData()
            .subscribe(data => this.data = data,
                        resError => this.errorMsg = resError);            
    }
}

entry.service.ts

entry.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, Response}  from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

@Injectable()
export class EntryService { 

     constructor(private _http: Http) { } 

     getData(){

        let myUrl = 'http://localhost/analy/entry/getData';
        return this._http.get(myUrl)
            .map((res: Response ) => res.json())
            .catch(this._errorHandler);
      } 
      _errorHandler(error: Response){
          console.error(error);
          return Observable.throw(error || "Server Error");
      }
}

Entry.php

Entry.php

class Entry extends CI_Controller
{
    function __construct()
    {
        parent::__construct();      

        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Headers: X-Requested-With');
        header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
    }

    function getData(){
        $data = array('price' => 999,
               'qty' => 8);                
        $jdata = json_encode($data);                       
        return ($jdata);
    }
}

我正在使用webpack2.该代码在plnkr上不起作用，但在我的系统上起作用.但是，它对于mydata.json文件来说是完美的，但是给"entry/getData"(来自entry.service.ts)的get请求给出了错误.getData是Entry.php控制器中的方法.

I am using webpack 2. The code is not working at plnkr but on my system. But it is working perfectly for mydata.json file but giving error for get request to "entry/getData" (from entry.service.ts). getData is method in Entry.php controller.

可能是什么原因，什么是可能的解决方案.请任何人都可以帮助我解决问题.

What can be the possible cause and what is possible solution..???Please any one can please help me out to resolve the problem.

推荐答案

您正在尝试将空值解析为JSON

You are trying to parse a null value as a JSON

return this._http.get(myUrl)
        .map((res: Response ) => res.json())
        .catch(this._errorHandler);

如果res为null/undefined/empty字符串，则会收到错误消息.只需在执行res.json()之前检查res的值，就不会收到错误.为确保这一点，请在尝试解析之前先做一个console.log(res).

If res is null/undefined/empty string you will get the error. Just check for the value of res before doing res.json() and you won't get the error. To be sure of this make a console.log(res) before trying to parse it.

这篇关于从Angular 2向Codeigniter的Http中的JSON输入意外结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！