batuman batuman - 1 month ago 4
Ajax Question

Retrieving data from sql database using $http.get

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

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

Comments