SyntaxError：意外的令牌＆lt;在JSON位于JSON.parse的0位

Question

我在本教程的帮助下创建了一个带有离子的应用程序：http://masteringionic.com/blog/2016-12-15-using-php-and-mysql-with-ionic/学校计划

但是当我想选择所有客户端时，我收到了这个错误：

  

SyntaxError：意外的令牌＆lt;在JSON的位置0，在JSON.parse（）的XMLHttp ...，文本

我的PHP脚本：

    <?php

   // Define database connection parameters
   $hn      = 'localhost';
   $un      = 'root';
   $pwd     = '';
   $db      = 'equida';
   $cs      = 'utf8';


   // Set up the PDO parameters
   $dsn     = "mysql:host=" . $hn . ";port=3306;dbname=" . $db . ";charset=" . $cs;
   $opt     = array(
                        PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
                        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ,
                        PDO::ATTR_EMULATE_PREPARES   => false,
                       );
   // Create a PDO instance (connect to the database)
   $pdo     = new PDO($dsn, $un, $pwd, $opt);
   $data    = array();


   // Attempt to query database table and retrieve data
   try {
      $stmt     = $pdo->query('SELECT * FROM client');
      while($row  = $stmt->fetch(PDO::FETCH_OBJ))
      {
         // Assign each row of data to associative array
         $data[] = $row;
      }

      // Return data as JSON
      echo json_encode($data);
   }
   catch(PDOException $e)
   {
      echo $e->getMessage();
   }


?>

我的javascript：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'page-lst-client',
  templateUrl: 'lst-client.html'
})
export class LstClientPage {
   /**
    * @name items
    * @type {Array}
    * @public
    * @description     Used to store returned PHP data
    */
   public items : Array<any> = [];

   constructor(public navCtrl: NavController,
               public http   : HttpClient)
   {

   }


   /*
    * Triggered when template view is about to be entered
    * Returns and parses the PHP data through the load() method
    *
    * @public
    * @method ionViewWillEnter
    * @return {None}
    */
   ionViewWillEnter() : void
   {
      this.load();
   }


   /*
    * Retrieve the JSON encoded data from the remote server
    * Using Angular's Http class and an Observable - then
    * assign this to the items array for rendering to the HTML template
    *
    * @public
    * @method load
    * @return {None}
    */
   load() : void
   {
      this.http
      .get('wequida/retrieve-client.php')
      .subscribe((data : any) =>
      {
         console.dir(data);
         this.items = data;
      },
      (error : any) =>
      {
         console.dir(error);
      });
   }


   /*
    * Allow navigation to the AddTechnologyPage for creating a new entry
    *
    * @public
    * @method addEntry
    * @return {None}
    */
   addEntry() : void
   {
      this.navCtrl.push('AddClientPage');
   }


   /*
    * Allow navigation to the AddTechnologyPage for amending an existing entry
    * (We supply the actual record to be amended, as this method's parameter,
    * to the AddTechnologyPage
    *
    * @public
    * @method viewEntry
    * @param param      {any}           Navigation data to send to the next page
    * @return {None}
    */
   viewEntry(param : any) : void
   {
      this.navCtrl.push('AddClientPage', param);
   }
}