Question

我想要做的是当我的ajax请求返回成功时，继续将div添加到#ajax_tweets。目前发生的是每次ajax函数在计时器上运行并且ajax返回成功时，所需的最新div在屏幕上正确显示。但是当它下次运行时，前一个div被覆盖而不会被附加。要么我错误地追加，要么我不确定......现在让我疯了一会儿。

提前谢谢你。

我的代码：

$(document).ready(function() {
    window.setInterval(ajax_test, 10000);
    counter = 0;

    function ajax_test() {
        $(".tweets").html('Retrieving...');
        $.ajax({
            type: "POST",
            url: "assets/ajax/get_latest_tweets.php",
            data: "tid=" + id,
            timeout: 20000,
            success: function(msg) {
                if (msg != "") {
                    add_to_tweet_feed( msg );
                    id++;
                    alert(id + msg);
                }     
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $(".tweets").html('Timeout contacting server..');
            }
        });
    }

    function add_to_tweet_feed ( msg ) {
        $("#ajax_tweets").append(msg);  
    }
});

从服务器返回的代码：

<div id="'.$tid.'" class="t_feed">             
                               <div class="calander right">
                                <div class="calander_month"><span>'.$row['pub_month'].'</span></div>
                                <div class="calander_day"><span>'.$row['pub_day'].'</span> </div> 
                               </div>
                                <span class="ajax_tweet bold">'.$row['source'].'</span>
                                <p>'.$tweet.'</p>
                              </div><div class="clear_both></div>

前端代码：

           <div id="ajax_tweets" class="tweets">

           </div>

Answer 1

代码中的这一行实际上清除了整个容器，这就是为什么你只有最后一个容器：

$(".tweets").html('Retrieving...');

一种解决方案可能是让你的标记像这样：

<div id="ajax_tweets" class="tweets">
    <div id="ajax_message"></div>
</div>

...并更改您的代码以更新该元素并在其前面插入新推文：

$(document).ready(function() {
    window.setInterval(ajax_test, 10000);
    counter = 0;

    var $message = $("#ajax_message");

    function ajax_test() {
        $message.html('Retrieving...');
        $.ajax({
            type: "POST",
            url: "assets/ajax/get_latest_tweets.php",
            data: "tid=" + id,
            timeout: 20000,
            success: function(msg) {
                $message.html('');
                if (msg != "") {
                    add_to_tweet_feed( msg );
                    id++;
                }     
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $message.html('Timeout contacting server..');
            }
        });
    }

    function add_to_tweet_feed ( msg ) {
        $(msg).insertBefore($message);
    }
});

修改：修正了上述代码中的错误（insertBefore()的错误使用）。此外，如果您担心请求返回的顺序，您可以添加占位符并在成功时替换它们或在失败时删除它们：

$(document).ready(function() {
    window.setInterval(ajax_test, 10000);
    counter = 0;

    var $message = $("#ajax_message");

    function ajax_test() {
        $message.html('Retrieving...');

        var $placeholder = $('<div></div>').insertBefore($message).hide();

        $.ajax({
            type: "POST",
            url: "assets/ajax/get_latest_tweets.php",
            data: "tid=" + id,
            timeout: 20000,
            success: function(msg) {
                $message.html('');
                if (msg != "") {
                    add_to_tweet_feed(msg, $placeholder);
                    id++;
                }     
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $placeholder.remove();
                $message.html('Timeout contacting server..');
            }
        });
    }

    function add_to_tweet_feed (msg, $placeholder) {
        $placeholder.show().replaceWith(msg);
    }
});

从函数运行时，Jquery不会顺序添加div

1 个答案: