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
