使用$ http.get从sql数据库检索数据

Question

This is the continuation of my previous post . I used AngularJS's routing to load different html files. For student display, data is retrieved from sql database using $http.get.

I like to check my ajax.php is really working. From the browser, when run localhost/ajax.php Then can see the info as

        MySQL host info: 
    [{"0":"1","id":"1","1":"Mark","Name":"Mark","2":"Male","Gender":"Male","3":"London","City":"London"},
    {"0":"2","id":"2","1":"John","Name":"John","2":"Male","Gender":"Male","3":"Chenni","City":"Chenni"},
    {"0":"3","id":"3","1":"Hint","Name":"Hint","2":"Male","Gender":"Male","3":"Singapore","City":"Singapore"},
    {"0":"4","id":"4","1":"Sara","Name":"Sara","2":"Female","Gender":"Female","3":"Sydney","City":"Sydney"},
    {"0":"5","id":"5","1":"Tom","Name":"Tom","2":"Male","Gender":"Male","3":"New York","City":"New York"},
    {"0":"6","id":"6","1":"Pam","Name":"Pam","2":"Male","Gender":"Male","3":"Los Angeles","City":"Los Angeles"},

    {"0":"7","id":"7","1":"Catherine","Name":"Catherine","2":"Female","Gender":"Female","3":"Chicago","City":"Chicago"},
    {"0":"8","id":"8","1":"Mary","Name":"Mary","2":"Femal","Gender":"Femal","3":"Houston","City":"Houston"},

    {"0":"9","id":"9","1":"Mike","Name":"Mike","2":"Male","Gender":"Male","3":"Phoenix","City":"Phoenix"},
    {"0":"10","id":"10","1":"Rosie","Name":"Rosie","2":"Female","Gender":"Female","3":"Manchestor","City":"Manchestor"},
    {"0":"11","id":"11","1":"Lim","Name":"Lim","2":"Male","Gender":"Male","3":"Singapore","City":"Singapore"},
    {"0":"12","id":"12","1":"Tony","Name":"Tony","2":"Male","Gender":"Male","3":"Hong Kong","City":"Hong Kong"},
    {"0":"13","id":"13","1":"Royce","Name":"Royce","2":"Male","Gender":"Male","3":"London","City":"London"},
    {"0":"14","id":"14","1":"Hitler","Name":"Hitler","2":"Male","Gender":"Male","3":"Germany","City":"Germany"},
    {"0":"15","id":"15","1":"Tommy","Name":"Tommy","2":"Male","Gender":"Male","3":"New Jersy","City":"New Jersy"}]

It looks correct. My database has the following data.

id  Name    Gender  City
1   Mark    Male    London
2   John    Male    Chenni
3   Hint    Male    Singapore
4   Sara    Female  Sydney
5   Tom     Male    New York
6   Pam     Male    Los Angeles
7   Catherine   Female  Chicago
8   Mary    Femal   Houston
9   Mike    Male    Phoenix
10  Rosie   Female  Manchestor
11  Lim     Male    Singapore
12  Tony    Male    Hong Kong
13  Royce   Male    London
14  Hitler  Male    Germany
15  Tommy   Male    New Jersy

My queries are

How can I debug my ajax.php in other better alternative ways? I use Netbeans IDE. I have problem with displaying data at Students link. Names are not displayed. If ajax.php has no issue, where could have problem?

Thanks

EDIT: I changed my code to

connect.php

<?php
    // db credentials
    define('DB_HOST', 'localhost');
    define('DB_USER','root');
    define('DB_PASS','nyan');
    define('DB_NAME','Students');

    // Connect with the database.
    function connect()
    {
      $connect = mysqli_connect(DB_HOST ,DB_USER ,DB_PASS ,DB_NAME);

      if (mysqli_connect_errno($connect))
      {
        die("Failed to connect:" . mysqli_connect_error());
      }

      mysqli_set_charset($connect, "utf8");


      return $connect;
    }


?>

Ajax.php

<?php
    require 'connect.php';

    $connect = connect();

    // Get the data
    $students = array();
    $sql = "SELECT id, Name, Gender, City  FROM tblStudents";

    if($result = mysqli_query($connect,$sql))
    {
      $count = mysqli_num_rows($result);

      $cr = 0;
      while($row = mysqli_fetch_assoc($result))
      {
          $students[$cr]['id']    = $row['id'];
          $students[$cr]['Name']  = $row['Name'];
          $students[$cr]['Gender'] = $row['Gender'];
          $students[$cr]['City'] = $row['City'];         
          $cr++;
      }
    }

    $json = json_encode($students);
    echo $json;
    exit;

?>

Script.js

var app = angular.module("Demo", ["ngRoute"])
                 .config(function($routeProvider){
                 $routeProvider
                 .when("/home", {
                     templateUrl:"Templates/home.html",
                     controller:"homeController"
                 })
                 .when("/courses", {
                     templateUrl:"Templates/courses.html",
                     controller:"coursesController"
                 })
                 .when("/students", {
                     templateUrl:"Templates/students.html",
                     controller:"studentsController"
                 })
            })
            .controller("homeController", function($scope){
                 $scope.message = "Home Page";
            })
            .controller("coursesController", function($scope){
                 $scope.courses = ["C#", "VB.NET", "SQL Server", "ASP.NET"];
            })
            .controller("studentsController", function ($scope, $http) {
                 $http.get("ajax.php") .then(function(response) {
                    $scope.students = response;
                 });

            });

It looks ok, but still have error at Chrome when I pressed F12

GET http://localhost:8383/favicon.ico net::ERR_EMPTY_RESPONSE

I tested as both Ajax.php and connect.php into /var/www/html folder and run localhost/Ajax.php The returned data is correct and as follow.

[{"id":"1","Name":"Mark","Gender":"Male","City":"London"},{"id":"2","Name":"John","Gender":"Male","City":"Chenni"},{"id":"3","Name":"Hint","Gender":"Male","City":"Singapore"},{"id":"4","Name":"Sara","Gender":"Female","City":"Sydney"},{"id":"5","Name":"Tom","Gender":"Male","City":"New York"},{"id":"6","Name":"Pam","Gender":"Male","City":"Los Angeles"},{"id":"7","Name":"Catherine","Gender":"Female","City":"Chicago"},{"id":"8","Name":"Mary","Gender":"Femal","City":"Houston"},{"id":"9","Name":"Mike","Gender":"Male","City":"Phoenix"},{"id":"10","Name":"Rosie","Gender":"Female","City":"Manchestor"},{"id":"11","Name":"Lim","Gender":"Male","City":"Singapore"},{"id":"12","Name":"Tony","Gender":"Male","City":"Hong Kong"},{"id":"13","Name":"Royce","Gender":"Male","City":"London"},{"id":"14","Name":"Hitler","Gender":"Male","City":"Germany"},{"id":"15","Name":"Tommy","Gender":"Male","City":"New Jersy"}]

So Ajax.php and connect.php are working. Just AngularJs Script can't retrieve correctly. What is wrong in my Script.js?

Thanks

Answer 1

I have a solution here . Finally it worked with my persistent attack. Thanks all for your help and suggestions.