Question

我的html页面中有3个div，显示：none默认情况下，我想定期检查DB并相应地更新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

?>

我的DB有2列id和state，id有p1，p2，p3作为值，state是true或false。

请指出我做错了什么。

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

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);
    });
}

使用AJAX和mysql更新html页面

2 个答案: