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>
2 answers
solution1
1 ACCPTED 2015-06-08 08:40:43
您是否将响应设置为Json String？
header("Content-Type: application/json; charset=UTF-8");
solution2
1 2015-06-08 09:11:18
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.