Ajax 自动刷新更新几个 div 取决于一个值

Question

下午好，

我正在使用 Eliza Witkowska 的 Ajax 自动刷新代码：http://blog.codebusters.pl/en/entry/ajax-auto-refresh-volume-ii

现在我想要实现的是从数据库中选择数据并将它们拆分为 3 个 div，具体取决于字段 dish_type 的值，即整数。

到目前为止，在咨询了 Eliza 之后，我已经去了那里：

我的 db.php 文件：

    function get_news(){    
    if($result = $this->db->query('SELECT t1.* FROM fandb t1 JOIN (SELECT tableno, MAX(add_date) add_date FROM fandb GROUP BY tableno ASC) t2 ON t1.tableno = t2.tableno AND t1.add_date = t2.add_date WHERE id<>1;')){

$return = array();
while($r = $result->fetch_object()){
if (''.htmlspecialchars($r->dish_type).''=='1') { $dish='STARTER'; } elseif (''.htmlspecialchars($r->dish_type).''=='2') { $dish='MAIN COURSE'; } elseif (''.htmlspecialchars($r->dish_type).''=='3') { $dish='DESSERT'; }
            if (''.htmlspecialchars($r->dish_type).''=='1') { $class_n='id="kitchen_tab_starter"'; } elseif (''.htmlspecialchars($r->dish_type).''=='2') { $class_n='id="kitchen_tab_main"'; } elseif (''.htmlspecialchars($r->dish_type).''=='3') { $class_n='id="kitchen_tab_dessert"'; } elseif (''.htmlspecialchars($r->dish_type).''=='0') { $class_n='id="kitchen_tab_done"'; }

switch((int)$r->title){
    case 1:
        $arr= array(

            /* the id of a div that you want to update */
            'destination'=>'#kitchen_tab_starter',

            /* the html that will replace current html
            in div#kitchen_tab_starter */
            'html'=>'<button '.$class_n.'><div class="fontbig">'.htmlspecialchars($r->tableno).'</div><div class="fontsmall">'.$dish.'</font></div></button>'

        );
        $return[] = $arr;
    break;
    case 2:
        $arr= array(
            'destination'=>'#kitchen_tab_main',
            'html'=>'<button '.$class_n.'><div class="fontbig">'.htmlspecialchars($r->tableno).'</div><div class="fontsmall">'.$dish.'</font></div></button>'
        );
        $return[] = $arr;
    break;
    case 3:
        $arr= array(
            'destination'=>'#kitchen_tab_dessert',
            'html'=>'<button '.$class_n.'><div class="fontbig">'.htmlspecialchars($r->tableno).'</div><div class="fontsmall">'.$dish.'</font></div></button>'
        );
        $return[] = $arr;
    break;
    /* ... and so on */
}
}
return $return;
        }
    }

我的 index.php 文件

检查器代码部分：

    <script>
    /* AJAX request to checker */
    function check(){
        $.ajax({
            type: 'POST',
            url: 'checker.php',
            dataType: 'json',
            data: {
                counter:$('#message-list').data('counter')
            }
        }).done(function( response ) {
            /* update counter */
            $('#message-list').data('counter',response.current);
            /* check if with response we got a new update */
            if(response.update==true){
            $('#div1').html(response.news);
                 $('#div2').html(response.news);
                 $('#div3').html(response.news);
            }
        });
    }
    //Every 20 sec check if there is new update
    setInterval(check,2000);
</script>

显示部分

    <div id="kitchen_tab_starter" data-counter="<?php echo (int)$db->check_changes();?>">
    <?php echo $db->get_news();?>
</div>
        <div id="kitchen_tab_main" data-counter="<?php echo (int)$db->check_changes();?>">
    <?php echo $db->get_news();?>
</div>
        <div id="kitchen_tab_dessert" data-counter="<?php echo (int)$db->check_changes();?>">
    <?php echo $db->get_news();?>
</div>

不幸的是，它没有按我的意愿工作，我的意思是它根本不起作用。 您有什么想法有什么建议可以引导我了解如何让它按我的意愿工作吗？

谢谢

Answer 1

恐怕在您的 .done 方法中您没有使用正确的 ID

...
}).done(function( response ) {
        /* update counter */
        $('#message-list').data('counter',response.current);
        /* check if with response we got a new update */
        if(response.update==true){
        $('#div1').html(response.news);
             $('#div2').html(response.news);
             $('#div3').html(response.news);
        }
    });

如果不是这样，您能否验证您的 ajax 调用是否返回到 done 方法并获得请求的数据？

Answer 2

我通过在文件中复制函数绕过了这个问题，所以现在我确实有 3 个函数：db.php 文件中的 get_news1 get_news2 get_news3，我必须进行相关更改在 index.php 中，底部带有 ajax 检查器和 div 所以复制：

    <script>
    /* AJAX request to checker */
    function check(){
        $.ajax({
            type: 'POST',
            url: 'checker.php',
            dataType: 'json',
            data: {
                counter:$('#message-list1').data('counter')
            }
        }).done(function( response ) {
            /* update counter */
            $('#message-list1').data('counter',response.current);
            /* check if with response we got a new update */
            if(response.update==true){
                $('#message-list1').html(response.news);
                var audio = new Audio('ding.mp3');
            audio.play();
            }
        });
    }
    //Every 20 sec check if there is new update
    setInterval(check,2000);
</script>

并将#message-list1 替换为message-list2 等，并在文件底部添加如下div：

    <div class="show_tables" id="message-list1" data-counter="<?php echo (int)$db->check_changes();?>">
    <?php echo $db->get_news1();?>
</div>

然后再次使用上述更改复制它们。

您必须进行的最后更改是在 checker.php 文件中，从 db.php 文件中调用函数以调出您的 get_news# 函数

在我的示例中如下所示：

if(isset($_POST) && !empty($_POST['counter']) && (int)$_POST['counter']!=$data['current']){
//the counters are diffrent so get new message list
$data['news'] .= $db->get_news1();
$data['news2'] .= $db->get_news2();
$data['news3'] .= $db->get_news3();
$data['news4'] .= $db->get_last_orders();
$data['update'] = true;

}

$data['news1'] 等在索引文件中的 ajax 函数中被调用，$db->get_news1(); 等是您在 db.php 文件中的函数。

希望这对将来的某人有所帮助。 我确信有更简单的方法可以做到这一点，但这对我有用。

祝你好运！