Question

我正在努力建立一个简单的社交媒体网站，让人们可以在帖子上发帖和评论（有点像facebook）。为了获取帖子和评论，我创建了两个简单的PHP脚本，以json格式获取结果。然后我在jquery getPosts()和getComments()中创建了两个函数来ajax结果。成功时，这些函数clone()我为每个返回的帖子/评论对象创建的html框架。

这是我的html框架： -

    <div class="KK-posts_feed">

            <div class="KK-post_frame" style="display:none;"> //This is the div that I clone() for postings

                <div class="KK-post_info_header">
                        <a class="KK-post_username"></a>    
                   </div>
                </div>

                <div class="KK-post_text"></div>

                <div class="KK-post_comment_thread" data-PID="">
                    <div class="KK-post_comment_box"> //This is the div that I clone for comments

                        <div class="KK-post_comment_user_info">
                            <a class="KK-post_comment_username"></a>
                        </div>
                        <div class="KK-post_comment_text"></div>
                    </div>
                </div>
            </div>
        </div>

这是输出帖子的getPosts()方法： -

    function getPosts(){  //This function gets the posts and clones the html for each post
        $.ajax({
        type : 'GET',
        url : 'fetchposts.php',
        dataType: 'json',
        error : function(){
            $('.dash_results_bar').html('<p class="KK-post_load_error">' + "Sorry, couldn't load posts at the moment. This maybe because we are facing downtime or because the databases are being updated." + ' <a href="#" class="KK-post_load_retry">Retry</a>' + "</p>");
        },
        success : function(data)
        {
         var posts = data.posts;

            if(posts.length)
            {
                $('.KK-post_frame:first').css("display", "block");
                $(posts).each(function(index, value){
                    $('.KK-post_frame:first')
                    .clone(true)
                    .attr('id', (value.post_id))
                    .find('.KK-post_username').html(value.user_fullname)
                    .end()
                    .find('.KK-post_text').html(value.post_text)
                    .end()
                    .find('.KK-post_comment_thread').attr('data-PID', value.post_id)
                    .end()
                    .appendTo('.KK-posts_feed');
                });
                $('.KK-post_frame:first').css("display", "none");
            }
        }   
    });
}

这是在每个帖子下输出评论的getComments()方法： -

function getComments(){
        $('.KK-post_comment_thread').each(function(){ // I run this method for each comment thread div inside each of my posts div
        var pid = $(this).attr('data-PID'); // PID is the 'post id' that I use, to identify each comment thread div separately.
        var self = this;
        $.ajax({
            type : 'POST',
            url : 'fetchcomments.php',
            data : 'pid='+pid, // I send the post id to the php script which returns the comments for the particular post in the form of json objects
            error : function(){
                $(self).html('<p class="KK-post_comment_load_error">' + "Sorry, couldn't load comments at the moment." + ' <a class="KK-post_comment_load_retry" href="#">Retry</a>' + "</p>");
            },
            success : function(data){
                var comments = data.comments;

                if(comments.length)
                {
                    $('.KK-post_comment_box:first').css('display', 'block');
                    $(comments).each(function(index, value){
                        $('.KK-post_comment_box:first')
                        .clone(true)
                        .attr('id', value.comment_id)
                        .find('.KK-post_comment_username').html(value.user_fullname)
                        .end()
                        .find('.KK-post_comment_text').html(value.comment_text)
                        .end()
                        .appendTo(self);
                    });
                    $('.KK-post_comment_box:first').css('display', 'none');
                }
            }   
        });

    });
}

这就是我执行上述两个功能的方法： -

$('document').ready(function(){

     $.when(getPosts()).done(function(){

          getComments();
     });

});

虽然getPosts()方法执行完美并输出帖子，但getComments()方法要么不执行，要么不显示任何结果。我无法肯定地说，因为每次刷新页面时，我只会收到帖子而不是评论。我也检查了我的控制台，但没有发现脚本有任何错误。当我通过点击事件处理程序getComments()执行它时，$('button').click(function(){ getComments(); });方法运行得非常好。因此，我知道我的方法都运行正常，只是因为我无法在页面加载时一个接一个地执行它们。有人可以帮我解决这个特殊的问题吗？

Answer 1

您的getPosts()功能无法返回任何内容，因此您将undefined传递给$.when()。

您需要返回从$.ajax()返回的内容：

function getPosts(){  //This function gets the posts and clones the html for each post
    return $.ajax({
      // ...

JQuery函数不在文档加载上执行

1 个答案: