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

我迫切需要一个代码审查，我不知道还有什么地方可以问这个问题，但在这里

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

接下来，我将解释如何做到这一点：我有一个“profile”控制器，用于加载“profile”视图。一旦纵断面图被加载，我会调用ajax来加载注释，这些注释将附加结果，这基本上是我创建的另一个视图，称为profile_posts（注释）。一旦添加了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);
    }
}

纵断面图：

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>

下面是我为附加基本上是HTML数据的概要文件发布结果而进行的ajax调用：

$(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));
    });
};  

$（文档）.ready（函数（）{
getposts（0）；
$（“#加载更多”）。单击（函数（e）{
e、 预防默认值（）；
var page=$（this.data（'val'）；
getposts（第页）；
}); 
});
var getposts=函数（第页）{
$（“#加载程序”）.show（）；
$（“#加载#文本”）.hide（）；
$.ajax({
url:“”，
类型：'GET'，
数据：{''：''，第页：}
}).完成（功能（响应）{
$（“.timeline”）。追加（响应）；
$（“#加载程序”）.hide（）；
$（“#加载#文本”）.show（）；
$（'加载更多'）.data（'val'，（$（'加载更多'）.data（'val'）+1））；
});
};  

个人资料\u发布视图：

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);
    }
}

在这里，我认为我做错了，但我听从了别人的建议

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");
        }

    });

});

foreach（$profile\u posts作为$posts）
{
如果（$posts->post_type=='post'）
{
echo'

';
如果（$posts->poster==$posts->profile）
{                                       
echo“写了一篇文章”；
}
其他的
{                                       
echo“在timline上写了一篇帖子”；
}                                                                                       
回显“”.timespan（$posts->datetime，time（），1）。”

'
.$posts->post_文本。
“

“.$posts->likes。”
0
评论
分享
'；
}
如果（$posts->post_type=='video'）
{
echo'

';
如果（$posts->poster==$posts->profile）
{
echo“posted”。$posts->total_files。“new”。（$posts->total_files==1？'video'：'videos'）；
}
其他的
{
echo'posted'。$posts->total_files。'new'。（$posts->total_files==1？'video'：'videos'）。'on timline'；
}                                                                                       
回显“”.timespan（$posts->datetime，time（），1）。”

'
.$posts->post_文本。
“

0
0
评论
分享
'；
}
如果（$posts->post_type=='image'）
{
echo'

';
如果（$posts->poster==$posts->profile）
{
echo'posted'。$posts->total_files.'。（$posts->total_files==1？'image'：'images'）；
}
其他的
{
echo'posted'.$posts->total_files'..（$posts->total_files==1？'image'：'images'）.'on timline'；
}                                                                                       
回显“”.timespan（$posts->datetime，time（），1）。”

'
.$posts->post_文本。
'

0
0
评论
分享