How to read JSON data from a web server running PHP and MySQL?

1.2k Views Asked by At

I read example in http://www.w3schools.com/json/json_example.asp.

And I try it with my MySQL database and my PHP code. But it does not work. I am a beginner and I don't know what it wrong.

Here is my PHP link: http://xebus2014.tk/demo.php

And I change w3school code like this:

<!DOCTYPE html>
<html>

<head>
<style>
h1 {
    border-bottom: 3px solid #cc9900;
    color: #996600;
    font-size: 30px;
}
table, th , td  {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
}
table tr:nth-child(odd) {
    background-color: #f1f1f1;
}
table tr:nth-child(even) {
    background-color: #ffffff;
}
</style>
</head>

<body>

<h1>Customers</h1>
<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://xebus2014.tk/demo.php";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table>";

    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" + 
        arr[i].STT +
        "</td><td>" +
        arr[i].ID +
        "</td><td>" +
        arr[i].Name +
        "</td><td>" +
        arr[i].Singer +
        "</td></tr>";
    }
    out += "</table>"
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>
PHP code

2

There are 2 best solutions below

1
Vhortex On BEST ANSWER

Did you set the response as Json String?

header("Content-Type: application/json; charset=UTF-8");
2
Dexter Huinda On

Your result is already an object, so you don't need to parse it using JSON.parse, just use it as is and pass it through the loop as is.

I don't know about the cross domain issue, but to run it, I go directly to your function... see this fiddle for a working loop using your output -- http://jsfiddle.net/fu3g5Loe/

OR you may use this in your PHP backend

echo json_encode('Your result set goes here'); // this will apply the correct JSON representation of your result set before echoing

Working Code

<body>

<h1>Customers</h1>
<div id="id01"></div>

<script>
    /*
    var xmlhttp = new XMLHttpRequest();
    var url = "http://xebus2014.tk/demo.php";

    xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
    xmlhttp.send();
    */

    var params = [{"STT":"1","ID":"123","Name":"Sexy Love","Singer":"T-ara"},{"STT":"2","ID":"456","Name":"Day By Day","Singer":"T-ara"},{"STT":"3","ID":"789","Name":"Cry Cry","Singer":"T-ara"}];

    myFunction(params);

function myFunction(response) {
    var arr = response;

    var i;
    var out = "<table>";

    for(i = 0; i < response.length; i++) {  
    out += "<tr><td>" + 
        arr[i].STT +
        "</td><td>" +
        arr[i].ID +
        "</td><td>" +
        arr[i].Name +
        "</td><td>" +
        arr[i].Singer +
    "</td></tr>";
    }
    out += "</table>"
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>