Codeigniter 3来自2个不同页面的多个Ajax

时间：2016-03-07 23:35:12

标签： javascript php jquery ajax codeigniter

我迫切需要进行代码审查，而且我不知道还有什么要问这个，但是在这里。

首先，让我解释一下我在做什么：我有一个显示用户评论的用户个人资料页面。用户可以喜欢，不喜欢或回复评论。

接下来，我将解释如何执行此操作：我有一个＆＃39;个人资料＆＃39;控制器加载＆＃39;配置文件＆＃39;视图。加载配置文件视图后，我进行ajax调用以加载将附加结果的注释，这基本上是我创建的另一个名为profile_posts（comments）的视图。一旦附加了profile_posts，我就会对页面上的每个评论进行另一个ajax调用，以检索喜欢和不喜欢的数量，以及查看页面的用户是否喜欢/不喜欢更改颜色的注释。

现在，我遇到的问题是：我已经成功地完成了所有工作，但问题是我正在为每个注释进行ajax调用，这些注释总共花费60秒来加载所有数据 - 方式太长所以我知道我做的不对。

这是我的代码：

控制器： 

function profile($identity = NULL)
{
    if (!$this->ion_auth->logged_in())
    {
        // redirect them to the login page
        redirect('auth/login', 'refresh');
    }
    else
    {       
        // page title
        $data['title'] = "Profile";

        // get the id of the profile we're viewing
        $profile = $this->user_model->get_profile_id($identity);        
        $profile_id = $profile->id;

        // set the username of the profile we're viewing
        $data['username'] = $identity;

        // get the logged in user data
        $user = $this->ion_auth->user()->row(); 

        // get the id of the user making the post
        $data['user_id'] = $user->id;             

        $this->_render_page('user/profile', $data);
    }
}

个人资料视图：

个人资料视图有一个评论部分：

<!-- START TIMELINE -->        
<ul class="timeline">                           
</ul>

这是我用来附加profile_posts结果的ajax调用，它基本上是HTML数据：

$(document).ready(function(){
    getposts(0);   
    $("#load_more").click(function(e){
        e.preventDefault();
        var page = $(this).data('val');
            getposts(page);
    }); 
});

var getposts = function(page){
    $("#loader").show();
    $("#load_text").hide();
    $.ajax({
        url:'<?=base_url("user/get_posts").'/'.$username ?>',
        type:'GET',
        data: {'<?=$this->security->get_csrf_token_name()?>':'<?=$this->security->get_csrf_hash()?>', page:page}
    }).done(function(response){
        $(".timeline").append(response);
        $("#loader").hide();
        $("#load_text").show();
        $('#load_more').data('val', ($('#load_more').data('val')+1));
    });
};

profile_posts查看：

在这里，我认为我做错了，但我遵循了其他人的建议。

foreach ($profile_posts as $posts)
{
if($posts->post_type == 'post')
{
    echo '<li id="li1" class="all-posts posts li1">
        <div class="timeline-badge secondary"><i class="fa fa-comments"></i>    </div>
        <div class="timeline-panel">
            <div class="timeline-heading">                                              
                <div class="timeline-title">
                    <div class="timeline-post">
                        <a href="'.$posts->profile.'" class="margin-right5">
                            <img class="img-circle" src="http://0.gravatar.com/avatar/38d618563e55e6082adf4c8f8c13f3e4?s=40&amp;d=mm&amp;r=g" alt="..." height="48" width="48">
                        </a>
                    </div>
                    <div class="timeline-post">';
                        if($posts->poster == $posts->profile)
                        {                                       
                            echo '<a href="'.$posts->poster.'" class="stream-username">'.$posts->poster.'</a> wrote a post';                                        
                        }
                        else 
                        {                                       
                            echo '<a href="'.$posts->poster.'" class="stream-username">'.$posts->poster.'</a> wrote a post on <a href="'.$posts->profile.'" class="stream-username">'.$posts->profile.'s</a> timline';
                        }                                                                                       
                            echo '<p><small class="text-muted"><i class="fa fa-clock-o"></i> '.timespan($posts->datetime, time(), 1).' ago</small></p>
                    </div>
                </div>                                         
            </div>
            <div class="timeline-body">'
                .$posts->post_text.
                '<hr>
                <div class="timeline-footer">
                    <button type="button" class="btn btn-default like like-btn'.$posts->post_id.'" value="'.$posts->post_id.'"><i class="fa fa-thumbs-up margin-right5"></i>'.$posts->likes.'</button>
                    <button type="button" class="btn btn-default dislike dislike-btn'.$posts->post_id.'" value="'.$posts->post_id.'"><i class="fa fa-thumbs-down margin-right5"></i>0</button>
                    <button type="button" class="btn btn-default"><i class="fa fa-comment margin-right5"></i>Comment</button>
                    <button type="button" class="btn btn-default"><i class="fa fa-share-alt margin-right5"></i>Share</button>                                      
                </div>                                
            </div>
        </div>
    </li>';                 
}
if($posts->post_type == 'video')
{
    echo '<li id="li2" class="all-posts videos li2">
        <div class="timeline-badge danger"><i class="fa fa-video-camera"></i></div>
        <div class="timeline-panel">
            <div class="timeline-heading">                                          
                <div class="timeline-title">
                    <div class="timeline-post">
                        <a href="'.$posts->profile.'" class="margin-right5">
                            <img class="img-circle" src="http://0.gravatar.com/avatar/38d618563e55e6082adf4c8f8c13f3e4?s=40&amp;d=mm&amp;r=g" alt="..." height="48" width="48">
                        </a>
                    </div>
                    <div class="timeline-post">';
                        if($posts->poster == $posts->profile)
                        {
                            echo '<a href="'.$posts->poster.'" class="stream-username">'.$posts->poster.'</a> posted '.$posts->total_files.' new '.($posts->total_files == 1 ? 'video' : 'videos');
                        }
                        else 
                        {
                            echo '<a href="'.$posts->poster.'" class="stream-username">'.$posts->poster.'</a> posted '.$posts->total_files.' new '.($posts->total_files == 1 ? 'video' : 'videos').' on <a href="'.$posts->profile.'" class="stream-username">'.$posts->profile.'s</a> timline'; 
                        }                                                                                       
                        echo '<p><small class="text-muted"><i class="fa fa-clock-o"></i> '.timespan($posts->datetime, time(), 1).' ago</small></p>
                    </div>
                </div>                                     
            </div>
            <div class="timeline-body">'
                .$posts->post_text.
                '<hr>
                <div class="timeline-footer">
                    <button type="button" class="btn btn-default like like-btn'.$posts->post_id.'" value="'.$posts->post_id.'"><i class="fa fa-thumbs-up margin-right5"></i>0</button>
                    <button type="button" class="btn btn-default dislike dislike-btn'.$posts->post_id.'" value="'.$posts->post_id.'"><i class="fa fa-thumbs-down margin-right5"></i>0</button>
                    <button type="button" class="btn btn-default"><i class="fa fa-comment margin-right5"></i>Comment</button>
                    <button type="button" class="btn btn-default"><i class="fa fa-share-alt margin-right5"></i>Share</button>                                      
                </div>                                
            </div>
        </div>
    </li>';
}
if($posts->post_type == 'image')
{
    echo '<li id="li3" class="all-posts images li3">
        <div class="timeline-badge info"><i class="fa fa-camera"></i></div>
        <div class="timeline-panel">
            <div class="timeline-heading">                                          
                <div class="timeline-title">
                    <div class="timeline-post">
                        <a href="'.$posts->profile.'" class="margin-right5">
                            <img class="img-circle" src="http://0.gravatar.com/avatar/38d618563e55e6082adf4c8f8c13f3e4?s=40&amp;d=mm&amp;r=g" alt="..." height="48" width="48">
                        </a>
                    </div>
                    <div class="timeline-post">';
                        if($posts->poster == $posts->profile)
                        {
                            echo '<a href="'.$posts->poster.'" class="stream-username">'.$posts->poster.'</a> posted '.$posts->total_files.' '.($posts->total_files == 1 ? 'image' : 'images');
                        }
                        else 
                        {
                            echo '<a href="'.$posts->poster.'" class="stream-username">'.$posts->poster.'</a> posted '.$posts->total_files.' '.($posts->total_files == 1 ? 'image' : 'images').' on <a href="'.$posts->profile.'" class="stream-username">'.$posts->profile.'s</a> timline'; 
                        }                                                                                       
                        echo '<p><small class="text-muted"><i class="fa fa-clock-o"></i> '.timespan($posts->datetime, time(), 1).' ago</small></p>
                    </div>
                </div>                                     
            </div>
            <div class="timeline-body">'
                .$posts->post_text.                                                       
            '</div>
            <hr>
            <div class="timeline-footer">
                <button type="button" class="btn btn-default like like-btn'.$posts->post_id.'" value="'.$posts->post_id.'"><i class="fa fa-thumbs-up margin-right5"></i>0</button>
                <button type="button" class="btn btn-default dislike dislike-btn'.$posts->post_id.'" value="'.$posts->post_id.'"><i class="fa fa-thumbs-down margin-right5"></i>0</button>
                <button type="button" class="btn btn-default"><i class="fa fa-comment margin-right5"></i>Comment</button>
                <button type="button" class="btn btn-default"><i class="fa fa-share-alt margin-right5"></i>Share</button>                                      
            </div>      
        </div>
    </li>';
}
if($posts->post_type == 'image_upload')
{
    echo '<li id="li3" class="all-posts images li3">
        <div class="timeline-badge info"><i class="fa fa-camera"></i></div>
        <div class="timeline-panel">
            <div class="timeline-heading">                                          
                <div class="timeline-title">
                    <div class="timeline-post">
                        <a href="'.$posts->profile.'" class="margin-right5">
                            <img class="img-circle" src="http://0.gravatar.com/avatar/38d618563e55e6082adf4c8f8c13f3e4?s=40&amp;d=mm&amp;r=g" alt="..." height="48" width="48">
                        </a>
                    </div>
                    <div class="timeline-post">';
                        if($posts->poster == $posts->profile)
                        {
                            echo '<a href="'.$posts->poster.'" class="stream-username">'.$posts->poster.'</a> uploaded '.$posts->total_files.' new '.($posts->total_files == 1 ? 'image' : 'images');
                        }
                        else 
                        {
                            echo '<a href="'.$posts->poster.'" class="stream-username">'.$posts->poster.'</a> uploaded '.$posts->total_files.' new '.($posts->total_files == 1 ? 'image' : 'images').' on <a href="'.$posts->profile.'" class="stream-username">'.$posts->profile.'s</a> timline'; 
                        }                                                                                       
                        echo '<p><small class="text-muted"><i class="fa fa-clock-o"></i> '.timespan($posts->datetime, time(), 1).' ago</small></p>
                    </div>
                </div>                                     
            </div>
            <div class="timeline-body">'
                .$posts->post_text.                                                       
            '</div>
            <hr>
            <div class="timeline-footer">
                <button type="button" class="btn btn-default like like-btn'.$posts->post_id.'" value="'.$posts->post_id.'"><i class="fa fa-thumbs-up margin-right5"></i>0</button>
                <button type="button" class="btn btn-default dislike dislike-btn'.$posts->post_id.'" value="'.$posts->post_id.'"><i class="fa fa-thumbs-down margin-right5"></i>0</button>
                <button type="button" class="btn btn-default"><i class="fa fa-comment margin-right5"></i>Comment</button>
                <button type="button" class="btn btn-default"><i class="fa fa-share-alt margin-right5"></i>Share</button>                                      
            </div>      
        </div>
    </li>';
}
if($posts->post_type == 'gif')
{
    echo '<li id="li4" class="all-posts gifs li4">
        <div class="timeline-badge warning"><i class="fa fa-picture-o"></i>    </div>
        <div class="timeline-panel">
            <div class="timeline-heading">                                          
                <div class="timeline-title">
                    <div class="timeline-post">
                        <a href="'.$posts->profile.'" class="margin-right5">
                            <img class="img-circle" src="http://0.gravatar.com/avatar/38d618563e55e6082adf4c8f8c13f3e4?s=40&amp;d=mm&amp;r=g" alt="..." height="48" width="48">
                        </a>
                    </div>
                    <div class="timeline-post">';
                        if($posts->poster == $posts->profile)
                        {
                            echo '<a href="'.$posts->poster.'" class="stream-username">'.$posts->poster.'</a> posted '.$posts->total_files.' new '.($posts->total_files == 1 ? 'GIF' : 'GIFs');
                        }
                        else 
                        {
                            echo '<a href="'.$posts->poster.'" class="stream-username">'.$posts->poster.'</a> posted '.$posts->total_files.' new '.($posts->total_files == 1 ? 'GIF' : 'GIFs').' on <a href="'.$posts->profile.'" class="stream-username">'.$posts->profile.'s</a> timline'; 
                        }                                                                                       
                        echo '<p><small class="text-muted"><i class="fa fa-clock-o"></i> '.timespan($posts->datetime, time(), 1).' ago</small></p>
                    </div>
                </div>                                     
            </div>
            <div class="timeline-body">'
                .$posts->post_text.
                '<hr>
                <div class="timeline-footer">
                    <button type="button" class="btn btn-default like like-btn'.$posts->post_id.'" value="'.$posts->post_id.'"><i class="fa fa-thumbs-up margin-right5"></i>0</button>
                    <button type="button" class="btn btn-default dislike dislike-btn'.$posts->post_id.'" value="'.$posts->post_id.'"><i class="fa fa-thumbs-down margin-right5"></i>0</button>
                    <button type="button" class="btn btn-default"><i class="fa fa-comment margin-right5"></i>Comment</button>
                    <button type="button" class="btn btn-default"><i class="fa fa-share-alt margin-right5"></i>Share</button>                                      
                </div>                                
            </div>
        </div>
    </li>';
}
if($posts->post_type == 'playlist')
{
    echo '<li id="li5" class="all-posts playlists li5">
        <div class="timeline-badge success"><i class="fa fa-list"></i></div>
        <div class="timeline-panel">
            <div class="timeline-heading">                                          
                <div class="timeline-title">
                    <div class="timeline-post">
                        <a href="'.$posts->profile.'" class="margin-right5">
                            <img class="img-circle" src="http://0.gravatar.com/avatar/38d618563e55e6082adf4c8f8c13f3e4?s=40&amp;d=mm&amp;r=g" alt="..." height="48" width="48">
                        </a>
                    </div>
                    <div class="timeline-post">';
                        if($posts->poster == $posts->profile)
                        {
                            echo '<a href="'.$posts->poster.'" class="stream-username">'.$posts->poster.'</a> posted '.$posts->total_files.' new '.($posts->total_files == 1 ? 'playlist' : 'playlists');
                        }
                        else 
                        {
                            echo '<a href="'.$posts->poster.'" class="stream-username">'.$posts->poster.'</a> posted '.$posts->total_files.' new '.($posts->total_files == 1 ? 'playlist' : 'playlists').' on <a href="'.$posts->profile.'" class="stream-username">'.$posts->profile.'s</a> timline'; 
                        }                                                                                       
                        echo '<p><small class="text-muted"><i class="fa fa-clock-o"></i> '.timespan($posts->datetime, time(), 1).' ago</small></p>
                    </div>
                </div>                                     
            </div>
            <div class="timeline-body">'
                .$posts->post_text.
                '<hr>
                <div class="timeline-footer">
                    <button type="button" class="btn btn-default like like-btn'.$posts->post_id.'" value="'.$posts->post_id.'"><i class="fa fa-thumbs-up margin-right5"></i>0</button>
                    <button type="button" class="btn btn-default dislike dislike-btn'.$posts->post_id.'" value="'.$posts->post_id.'"><i class="fa fa-thumbs-down margin-right5"></i>0</button>
                    <button type="button" class="btn btn-default"><i class="fa fa-comment margin-right5"></i>Comment</button>
                    <button type="button" class="btn btn-default"><i class="fa fa-share-alt margin-right5"></i>Share</button>       
                    <input type="hidden"" name="post_id" class="post_id" value="'.$posts->post_id.'">                              
                </div>                                
            </div>
        </div>
    </li>';
}
?>
<script>
    $(function(){         
        var post_id = <?php echo $posts->post_id; ?>; 
        var like = 'like';
        var dislike = 'dislike';

        $('.like-btn'+post_id).click(function(){
            $('.dislike-btn'+post_id).removeClass('btn-danger'); 
            $(this).removeClass('btn-default');   
            $(this).addClass('btn-success');
            $.ajax({
                type:"POST",
                url:'<?=base_url("user/post_rate")?>',
                data:{'<?=$this->security->get_csrf_token_name()?>':'<?=$this->security->get_csrf_hash()?>',rate:like,post_id:post_id},
                success: function(response){
                    var likes = parseInt($('.like-btn'+post_id).text());
                    var liked = parseInt(response);
                    var totalLikes = likes + liked; 
                    var dislikes = parseInt($('.dislike-btn'+post_id).text());
                    if(dislikes == 0){
                        var totalDislikes = 0;
                    } else {
                        var totalDislikes = dislikes - 1;
                    }                        
                    $('.dislike-btn'+post_id).addClass('btn-default');                     
                    $('.like-btn'+post_id).html('<i class="fa fa-thumbs-up margin-right5"></i> '+totalLikes);
                    $('.dislike-btn'+post_id).html('<i class="fa fa-thumbs-up margin-right5"></i> '+totalDislikes);
                }
            });
        });
        $('.dislike-btn'+post_id).click(function(){
            $('.like-btn'+post_id).removeClass('btn-success');
            $(this).removeClass('btn-default');
            $(this).addClass('btn-danger');
            $.ajax({
                type:"POST",
                url:'<?=base_url("user/post_rate")?>',
                data:{'<?=$this->security->get_csrf_token_name()?>':'<?=$this->security->get_csrf_hash()?>',rate:dislike,post_id:post_id},
                success: function(response){
                    var dislikes = parseInt($('.dislike-btn'+post_id).text());
                    var disliked = parseInt(response);
                    var totalDislikes = dislikes + disliked;   
                    var likes = parseInt($('.like-btn'+post_id).text());
                    if(likes == 0){
                        var totalLikes = 0;
                    } else {
                        var totalLikes = likes - 1;
                    }     
                    $('.like-btn'+post_id).addClass('btn-default');
                    $('.dislike-btn'+post_id).html('<i class="fa fa-thumbs-up margin-right5"></i> '+totalDislikes);
                    $('.like-btn'+post_id).html('<i class="fa fa-thumbs-up margin-right5"></i> '+totalLikes);
                }
            });
        });
    });
</script>
<?php
}
?>
<script>
function getlikes(){
    $(".like").each(function(){
        var post_id = $(this).val();
        var self = $(this);
        $.ajax({
           method:"GET",
           url:'<?=base_url("user/get_post_like_count")?>',
           data:{'<?=$this->security->get_csrf_token_name()?>':'<?=$this->security->get_csrf_hash()?>',post_id:post_id},
           success:function(data){
               var json = JSON.parse(data);
               //alert(json.className); 
               $(self).addClass(json.likeClass);         
               $(self).html('<i class="fa fa-thumbs-up margin-right5"></i> '+json.likes); //updating total counts
           }
        });
    });
};

function getdislikes(){    
    $(".dislike").each(function(){
        var post_id = $(this).val();
        var self = $(this);
        $.ajax({
           method:"GET",
           url:'<?=base_url("user/get_post_dislike_count")?>',
           data:{'<?=$this->security->get_csrf_token_name()?>':'<?=$this->security->get_csrf_hash()?>',post_id:post_id},
           success:function(data){
               var json = JSON.parse(data);
               //alert(json.className); 
               $(self).addClass(json.dislikeClass);         
               $(self).html('<i class="fa fa-thumbs-up margin-right5"></i> '+json.dislikes); //updating total counts
           }
        });
    });
}
$(document).ready(function() { 
    getlikes();
    getdislikes();          
    var parent = $('.timeline'), list = $('li', parent);
    $('#showAll').click(function(){
        list.show("slow");
        $(".show-posts").removeClass("active");
        $("#showAll").addClass("active");
    });
    $('.show-posts').click(function(){
        var target = '.li'+$(this).attr('target');
        list.not(target).hide("slow");
        $(target,parent).show("slow");
        if(target == '.li1') {
            $("#showAll").removeClass("active");
            $(".show-posts").removeClass("active");
            $("#filterPosts").addClass("active");
        }
        if(target == '.li2') {
            $("#showAll").removeClass("active");
            $(".show-posts").removeClass("active");
            $("#filterVideos").addClass("active");
        }
        if(target == '.li3') {
            $("#showAll").removeClass("active");
            $(".show-posts").removeClass("active");
            $("#filterImages").addClass("active");
        }

    });

});

我的最终目标是使用喜欢/不喜欢的数据尽快加载个人资料信息。我不是在寻找有人为我做这项工作（除非你想要:)但是任何帮助都会受到赞赏。有人可以帮我重构我的代码吗？

1 个答案:

答案 0 :(得分：2)

正如你已经想出的那样：

  

问题是我正在为每个评论进行ajax调用，这些评论总共花费60秒来加载所有数据。

这里的问题是浏览器一次只允许一定数量的ajax调用。您可以在此处查看：http://www.browserscope.org/?category=network&v=1（＆＃34;每个主机名的连接数＆＃34 ;;对于最新的Chrome版本，它一次只能为6个。）

另一个问题是您为每个评论打开一个连接。这非常耗时。如果您打开开发工具，请转到标签＆＃34;时间轴＆＃34;在Chrome中，类似于＆＃34;网络分析＆＃34;在Firefox中，您将看到每个评论加载并花时间。

所以我建议你的主要目标应该是：减少请求。

你这样做是你的事。这里只有两个想法：

  1. 您也可以在CodeIgniter中写下喜欢和不喜欢的内容，并将其包含在评论部分中，这样您只需要一次ajax调用。
  2. 您可以创建一个网站（例如profile_posts本身），该网站会加载所有帖子，包括喜欢/不喜欢的内容，并以JSON格式输出。所有进一步的处理都在JS（正确的HTML标记等）
相关问题
最新问题