Question

下午好，

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

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

在与伊丽莎的咨询后到目前为止，我去了那里：

我的 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个函数： get_news1 get_news2 get_news3 在 db.php 文件中，我不得不进行相关更改在 index.php 中，ajax检查器和div位于底部所以复制：

HashMap

将<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等，并在文件底部添加div，如下所示：

message-list2

再次通过上述更改复制它们。

您必须进行的最后一项更改是在 checker.php 文件中，其中从 db.php 文件调用函数以调出<div class="show_tables" id="message-list1" data-counter="<?php echo (int)$db->check_changes();?>"> <?php echo $db->get_news1();?> </div>函数

在我的例子中如下：

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;等在索引文件的ajax函数中调用，而$data['news1']等是db.php文件中的函数。

希望这将有助于将来的某些人。我确定有更简单的方法，但这对我有用。

祝你好运！

更新couple div的Ajax Auto Refresh取决于一个值

2 个答案: