php - 使用 AJAX 和 mysql 更新 html 页面

Question

我的 html 页面中有 3 个 div，默认情况下显示：无，我想定期检查数据库并相应地更新我的 div 的显示属性。

<div class="gunnybag" style="float:right">
        <div id="p1" style="display:none;"><img id="drag1"  draggable="true" src="coconut.png"></div>
        <div id="p2" style="display:none;"><img id="drag2"  draggable="true" src="coconut.png"></div>
        <div id="p3" style="display:none;"><img id="drag3"  draggable="true" src="coconut.png"></div>
    </div>

为此，我编写了这个 JS 文件，

$(document).ready(function() {
     doAjax();
    });

function doAjax(){
$.ajax({
    url: "db_fetch.php",
    dataType: "json",
    success: function(json){
        var dataArray = JSON.decode(json);
        dataArray.each(function(entry){
            var i=1;
            if(entry.valueName==true){        //checking if `state`= true/false.
                $q('#p'+i).css( "display","block" );
            }
            else{
                $q('#p'+i).css( "display","none" );
            }
            i=i++;
        })
    }

}).complete(function(){
        setTimeout(function(){doAjax();}, 1000);  // check with DB every sec
    });
}

这是 db_fetch.php

<?php
try{
  $con=mysql_connect("sqlservername","uname", "pass") or die(mysql_error());
}
catch(Exception $e){
    echo $e;
}
mysql_select_db("db_name", $con) or die(mysql_error());

$q = mysql_query("SELECT `state` FROM `table` ");   //selecting all `state` from table
var_dump($q);
$query = mysql_query($q, $con);
$results = mysql_fetch_assoc($query);
echo json_encode($results);    //returns json obj to above JS

?>

我的数据库有 2 列 id 和 state，id 有 p1、p2、p3 作为值，并且 state 是真或假。

请指出我做错了什么。

非常感谢您的回复。提前致谢。

Answer 1

像这样使用 window.onload 函数。

<script language="javascript">
 window.onload = function() {

  doAjax();

 }
</script>

Answer 2

这是最终的工作代码。问题是我正在解析 json，注意：如果您在 $.ajax() 中使用 dataType: "json"，那么您不需要解析 JSON，它已经解析了！

ajx.js：

    $(document).ready(function() {
 doAjax();
});

function doAjax(){
var i=0;
$.ajax({
    url: "db_fetch.php",
    dataType: "json",
    success: function(json){

        jQuery.each(json, function(i){

            if(json[i].data.state=='true'){
                $('#p'+(i+1)).css( "display","block" );
            }
            else{
                $('#p'+(i+1)).css( "display","none" );
            }
            i=i++;
        });
    }

}).complete(function(){
        setTimeout(function(){doAjax();}, 2000);
    });
}