Javascript 从PHP编码的JSON文件中提取数据_Javascript_Php_Json_Ajax

Javascript 从PHP编码的JSON文件中提取数据

javascript php json ajax

Javascript 从PHP编码的JSON文件中提取数据,javascript,php,json,ajax,Javascript,Php,Json,Ajax,我从各种文章和教程中拼凑了以下内容，但我对PHP、JSON和Javascript非常陌生我有一个id为“playerName”的div，我需要每10秒更新一次问题： 1）我做得“对”，还是有更简单的方法？ 2）如果我想用JSON文件中的不同值更新2个不同的div，我是否需要复制完整的“ajax\u get\u JSON”函数我的json文件（aka:data.php）：我的html文件： <!DOCTYPE html> <html> <head>

我从各种文章和教程中拼凑了以下内容，但我对PHP、JSON和Javascript非常陌生

我有一个id为“playerName”的div，我需要每10秒更新一次

问题：

1）我做得“对”，还是有更简单的方法？ 2）如果我想用JSON文件中的不同值更新2个不同的div，我是否需要复制完整的“ajax\u get\u JSON”函数

我的json文件（aka:data.php）：

我的html文件：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ajax_get_json(){
    // Create our XMLHttpRequest object
    var results = document.getElementById("playerName");
    var hr = new XMLHttpRequest();
    // Create some variables we need to send to our PHP file
    hr.open("GET", "data.php", true);
    // Set content type header information for sending url encoded variables in the request
    hr.setRequestHeader("Content-type", "application/json");
    // Access the onreadystatechange event for the XMLHttpRequest object
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var data = JSON.parse(hr.responseText);
            results.innerHTML = "";
            for(var obj in data) {
                results.innerHTML += data[obj].name;
                setTimeout(ajax_get_jsonStatus, 10000);
            }
        }
    }
    // Send the data to PHP now... and wait for response to update the status div
    hr.send(null); // Actually execute the request
}
</script>
</head>
<body>
<div id="playerName"></div>
<script type="text/javascript">
    ajax_get_json();
</script>
</body>
</html>


函数ajax\u get\u json（）{
//创建XMLHttpRequest对象
var results=document.getElementById（“playerName”）；
var hr=新的XMLHttpRequest（）；
//创建一些我们需要发送到PHP文件的变量
hr.open（“GET”，“data.php”，true）；
//设置用于在请求中发送url编码变量的内容类型标头信息
hr.setRequestHeader（“内容类型”、“应用程序/json”）；
//访问XMLHttpRequest对象的onreadystatechange事件
hr.onreadystatechange=函数（）{
如果（hr.readyState==4&&hr.status==200）{
var data=JSON.parse（hr.responseText）；
results.innerHTML=“”；
for（数据中的var obj）{
results.innerHTML+=数据[obj].name；
setTimeout（ajax\u get\u jsonStatus，10000）；
}
}
}
//立即将数据发送到PHP…并等待更新status div的响应
hr.send（null）；//实际执行请求
}
ajax_get_json（）；

我几乎被淹没在谷歌搜索中。感谢您的帮助

大部分代码来自Adam Khoury的教程系列：

避免手工构建json，只需将本机数据类型编码为json就容易出错

$data = [
    "u1"=>[ "name"=>"Bob", "age"=>"25", "country"=>"United States" ]
];
echo json_encode($data);

不要为GET请求设置内容类型头，实际上不能在GET请求中设置内容体（通过XMLHttpRequest）。您可能将响应内容类型与请求混淆了？
您可以为预期的响应设置一个值，即它的

responseType

如果您想更新更多的div，只需在响应中输入数据即可

<?php
header("Content-Type: application/json"); // set the content type to json
$data = [
    "u1"=>[ "name"=>"Bob",    "age"=>"25", "country"=>"United States" ],
    "u2"=>[ "name"=>"Marley", "age"=>"11", "country"=>"of Jamaica" ]
];
echo json_encode($data);

避免手工构建json，只需将本机数据类型编码为json就容易出错

$data = [
    "u1"=>[ "name"=>"Bob", "age"=>"25", "country"=>"United States" ]
];
echo json_encode($data);

responseType

如果您想更新更多的div，只需在响应中输入数据即可

<?php
header("Content-Type: application/json"); // set the content type to json
$data = [
    "u1"=>[ "name"=>"Bob",    "age"=>"25", "country"=>"United States" ],
    "u2"=>[ "name"=>"Marley", "age"=>"11", "country"=>"of Jamaica" ]
];
echo json_encode($data);

setTimeout（ajax\u get\u jsonStatus，10000）

，您的

ajax\u get\u jsonStatus（）函数在哪里？为什么在循环的每次迭代中都要使用setTimeout（）
函数
，您的ajax\u get\u jsonStatus（）函数在哪里？为什么在循环的每次迭代中都要使用setTimeout（）
函数？