javascript - 使用ajax从php文件获取随机数不会更新新结果

Question

我正在研究我认为可能很简单的事情，即使用 jquery ajax 生成随机数。我有一个index.php，它会轮询generator.php以获取随机数，代码如下

index.php:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
setInterval(function(){
$.ajax({ url:'./generator.php', cache : false, success: function(data){
    document.write(data.foo);
}, dataType: "json"});
}, 3000);   
</script>

生成器.php:

<?php
$x = rand(10,100);
$array = array(
    'foo'  => $x    
);
echo json_encode($array);
?>

所以这在第一次加载时工作正常，它从generator.php获取随机数，但之后index.php继续加载但什么也得不到，显示的数字保持不变。我在这里做错了什么？

Answer 1

我认为问题是document.write(data.foo);。将其替换为:

document.getElementById('anId').innerHTML = data.foo;

并在 html 文档中该脚本之前添加一个 id 为“anId”的元素。

<div id="anId"></div>
<script type="text/javascript">
setInterval(function(){
$.ajax({ url:'./generator.php', cache : false, success: function(data){
    document.getElementById('anId').innerHTML = data.foo;
}, dataType: "json"});
}, 3000);   
</script>