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

Question

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>

Also post your php code. Don't put the php in a snippet (as it won't work) — SuperDJ
– SuperDJ, Commented Jun 8, 2015 at 8:37
You don't need to parse the response as it's already JSON. This is probably the error. — Jeremy Thille
– Jeremy Thille, Commented Jun 8, 2015 at 8:40
I executed the code and it worked correctly. I have used PHP as below <?php echo '[{"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"}]'; ?> — Yogesh
– Yogesh, Commented Jun 8, 2015 at 8:40
Your code is fine, but you may encounter cross domain issues if the page does not come from the same domain xebus2014.tk unless you implemented CORS — laruiss
– laruiss, Commented Jun 8, 2015 at 8:42

Vhortex · Accepted Answer · 2015-06-08 08:40:43Z

1

Did you set the response as Json String?

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

answered Jun 8, 2015 at 8:40

Vhortex

3811 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ThanhLam112358 Over a year ago

I add header in my php code. But it still dose not display data.

Dexter Huinda · Accepted Answer · 2015-06-08 09:19:05Z

1

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>

edited Jun 8, 2015 at 9:19

answered Jun 8, 2015 at 9:11

Dexter Huinda

1,2221 gold badge7 silver badges9 bronze badges

2 Comments

ThanhLam112358 Over a year ago

I want to read database from server. Console response me " Please avoid extended discussions in comments. Would you like to automatically move this discussion to chat?" @Dexter Huinda

Dexter Huinda Over a year ago

just try to replace the line that says var arr = JSON.parse(response) with var arr = response and test again.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related