结合 Jquery、AJAX 和 PHP 的麻烦

Question

我有一个简单的脚本，它使用 AJAX 在数据库表中查找更改，如果检测到更改，则从该表返回信息。

这是我的来源：http://blog.codebusters.pl/en/ajax-auto-refresh-volume-ii/#comment-570

我也有这个用 JS/JQ 写的漂亮的通知横幅：http://www.jqueryscript.net/other/Simple-jQuery-Sticky-Notification-Plugin-Notify-Me.html

我两个都是独立工作的，更新程序会自动更新 Div，按下按钮就会激活通知。

这里是updater接收div的代码：

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

据我所知，当数据计数器发生变化时，会调用 get_news()。

这里是 get_news() - 这是一个类下定义的 PHP 函数：

function get_news(){
    if($result = $this->dbase->query('SELECT * FROM cmc_log WHERE id<>1 ORDER BY time DESC LIMIT 1')){
        $return = '';
        while($r = $result->fetch_object()){
            $return .= '<p> '.$r->time.' | '.htmlspecialchars($r->message).'</p>';  
        }
        return $return;
    }
}

对于我拥有的通知系统：

<div class="container">

    <div class="btn-group">
        <a class="btn error"><i class="fa fa-warning"></i> Error</a>      
    </div>
</div>

<!-- SCRIPTS -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="assets/js/notifyme.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.error').on('click', function(){
        $(this).notifyMe(
            'top',
            'error',
            'Lorem Ipsum Text',
            'Lorem ipsum dolos lorem uisnsnd h jsakdh ajkdbh',
            600
        );
    });
});
</script>

我希望在新闻可用时调用通知横幅，即我猜是在 get_news() 上。但我还需要将 get_news() 的输出合并到实际的横幅中......我想我已经搞不清什么可以去哪里了！

任何帮助表示赞赏！谢谢，

更新！因此，自动刷新脚本的作者发布并提醒我有关 AJAX，这当然是触发的最佳场所。

<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){
                $('#message-list').html(response.newsf);
                $('#message-list2').html(response.news);
                //fire notification

                $(this).notifyMe(
'top',
'error',
'Update available:',
response.news.val,
400);

            }
        });
    }
    //Every 10 sec check if there is new update
    setInterval(check,10000);
</script>

我还没有解决的最后一件事是如何将$('#message-list2').html(response.news); 的值作为字符串输入到 notifyMe() 调用中？

回答： 得到它的工作： 可能有比填充隐藏的 div 更简洁的方法，但至少它现在可以工作了！

<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){
                $('#message-list').html(response.newsf);
                $('#message-list2').html(response.news);
                //fire notification

                $(this).notifyMe('top','error','Update available:',document.getElementById('message-list2').innerHTML,400);

            }
        });
    }
    //Every 20 sec check if there is new update
    setInterval(check,10000);
</script>

Previous alerts:

<div style="padding-left:10px" id="message-list" data-counter="<?php echo (int)$db->check_changes();?>">
    <?php echo $db->get_news_full();?>
</div>

<div style="display: none;" id="message-list2" data-counter="<?php echo (int)$db->check_changes();?>">
    <?php echo $db->get_news();?>
</div>  

尼克

Answer 1

需要在有新条目时触发点击，在ajax 完成并且response.update 为true 之后。类似的东西：

    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){
                $('#message-list').html(response.news);

                //we have new entries so we want to open the notify thing, so we trigger click, I'm assuming the click is for $('.error')
                $('.error').trigger('click'); 
            }
        });
    }

Answer 2

<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){
                $('#message-list').html(response.newsf);
                $('#message-list2').html(response.news);
                //fire notification

                $(this).notifyMe('top','error','Update available:',document.getElementById('message-list2').innerHTML,400);

            }
        });
    }
    //Every 20 sec check if there is new update
    setInterval(check,10000);
</script>

Previous alerts:

<div style="padding-left:10px" id="message-list" data-counter="<?php echo (int)$db->check_changes();?>">
    <?php echo $db->get_news_full();?>
</div>

<div style="display: none;" id="message-list2" data-counter="<?php echo (int)$db->check_changes();?>">
    <?php echo $db->get_news();?>
</div>