SyntaxError: JSON JSON JSON.parse 0 中的意外标记

Question

I created an application with ionic with the help of this tutorial: http://masteringionic.com/blog/2016-12-15-using-php-and-mysql-with-ionic/ a school programm

But when i want to select all my client, i get this error:

SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () at XMLHttp…, text

My PHP script:

    <?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();
   }


?>

My 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);
   }
}

Answer 1

Your getting an HTML response from your PHP script.

You should include a json header in your PHP script.

header('Content-type: application/json');

The line

echo $e->getMessage();

will not output JSON. Your javascript does not accommodate sending errors. In your PHP script you can use use:

echo json_encode(array('error' => false, 'data' => $data));
...
echo json_encode(array('error' => $e->getMessage(), 'data' => []));

Then in your javascript:

.subscribe((result: any) =>
{
    if (result.error) 
    {
        // error handling code
    } 
    else
    {
        console.dir(result.data);
        this.items = result.data;
    }
},

If there is an error connecting to the database your script will output an HTML message with an 'Uncaught PDOException'. You can wrap that in try/catch as well.

To know what the problem is you should look at what your PHP script is outputting.
To do that

• open the developers console [Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux)],
• go to the 'Network' tab,
• reload the page,
• look for your php script and click on it,
• open the 'Response' tab.

You will see the raw HTML or JSON response from the PHP script.

Edit - after reading comments:

If in the Response tab you see the full unparsed content of the PHP file then the web server you are using is not parsing PHP. You might be trying to do this without a sever by opening an HTML file with the javascript above through the file system using file:///C:/something/whatever.html
This will not work for obvious reasons.