I have a LAMP setup on my Ubuntu and I am trying to connect to print it out in an unordered list using Ajax. It does not, however print out anything and I don't see any calls to server on my Firebug.
If it helps, this is my HTML file making the call:
<!DOCTYPE html>
<html>
<head>
<title>Page Title Woo!</title>
</head>
<body>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<h1>Heading</h1>
<p>Paragraph.</p>
<ul></ul>
<script type='text/javascript'>
$(document).ready(function(){
$.getJSON('DbGetter.php', function(data) {
$.each(data, function(key, array) {
$('ul').append('<li id="' + key + '">'
+ array.longitude + ' '
+ array.latitude + '</li>');
});
});
});
</script>
</body>
</html>
And my php file which should be receiving the call:
<?php
$servername = "localhost";
$username = "testuser";
$password = "password";
$dbname = "Locations";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM places";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
$array = array()
while($row = $result->fetch_assoc()) {
$place = array(
'id' => $row["id"],
'latitude'=> $row["latitude"] ,
'longitude'=> $row["longitude"],
'place_name' => $row["place_name"],
'country_code'=> $row["country_code"],
'postal_code'=> $row["postal_code"]);
echo "Coordinates: " . $row["latitude"]. " " . $row["longitude"]. " - Name: " . $row["place_name"]. " " . "<br>";
array_push($array, $place);
}
echo json_encode($array);
} else {
echo "0 results";
}
$conn->close();
?>
Current state of the php file:
<?php
$servername = "localhost";
$username = "testuser";
$password = "password";
$dbname = "Locations";
header('Content-Type: application/json');
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM places";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
//declare associative array
$array = array();
$num = 0;
// output data of each row
while($row = $result->fetch_assoc()) {
//store them in an array
$place = array(
'id' => $row["id"],
'latitude'=> $row["latitude"] ,
'longitude'=> $row["longitude"],
'place_name' => $row["place_name"],
'country_code'=> $row["country_code"],
'postal_code'=> $row["postal_code"]);
/*
echo "Coordinates: " . $row["latitude"]. " " . $row["longitude"]. " - Name: " . $row["place_name"]. " " . "<br>";
*/
//building the second associative array
$array[$num] = $place;
$num += 1;
}
echo json_encode($array);
} else {
echo json_encode("0 results");
}
$conn->close();
?>
You have a parse error in your PHP code which is most likely causing a server 500 error. Nothing is echoed as a result.
if ($result->num_rows > 0) {
// output data of each row
$array = array() // Missing semi-colon
while($row = $result->fetch_assoc()) {
In Chrome, a server 500 error shows up in the console as an error even if you don't handle it. I'm not sure how Firefox handles a server 500 error. Chain a fail method to handle the error yourself. Also, while debugging, console.log the response in the case of a success to see what is actually being returned.
<script type='text/javascript'>
$(document).ready(function(){
$.getJSON('DbGetter.php', function(data) {
console.log(data);
$.each(data, function(key, array) {
$('ul').append('<li id="' + key + '">'
+ array.longitude + ' '
+ array.latitude + '</li>');
});
})
.fail(function(error) {
console.log(error);
});
});
</script>
And yes, this AJAX request does make an actual HTTP GET request to the server (/DbGetter.php).
In your PHP file, be sure to json_encode all echo statements so that jQuery will be able to interpret the response properly. Also, ensure that what you are returning is valid JSON.
You will need to build an associative array and return it, just as you did with $place. Get rid of the non json_encode'd echo statements.