堆栈内存溢出
  繁体   English   中英

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

[英]Codeigniter 3 multiple Ajax from 2 different pages

 原文  2016-03-07 23:35:12  5   1    javascript/ php/ jquery/ ajax/ codeigniter

问题描述

我迫切需要进行代码审查，但我不知道还有什么要问的。

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

接下来，我将说明如何执行此操作：我有一个加载“配置文件”视图的“配置文件”控制器。 加载配置文件视图后，我将进行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);
    }
}

个人资料视图：

个人资料视图中有一段用于评论： 

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

这是我进行的ajax调用，用于附加profile_posts结果，该结果基本上是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 个解决方案

解决方案1
 2 已采纳  2016-03-08 00:13:48

因此，您已经知道：

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

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

另一个问题是您为每个评论打开一个连接。 这非常耗时。 如果您打开开发工具，请转到Chrome中的“时间轴”标签，类似于Firefox中的“网络分析”标签，您会看到所有评论正在加载并花费时间。

因此，我建议您的主要目标应该是：减少请求。

您这样做的方式是您的事。 这是我仅有的两个想法：

  1. 您也可以在CodeIgniter中写下“喜欢”和“不喜欢”部分，并将其包括在“注释”部分中，因此您只需要一个ajax调用。
  2. 您可以创建一个站点（例如profile_posts本身），以加载所有帖子（包括喜欢/不喜欢），并将其全部输出为JSON。 所有进一步的处理都将在JS中进行（正确的HTML标记等）。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在codeigniter的不同页面上显示多个视图 处理来自不同页面的Ajax URL？ 如何在具有不同 url 的多个页面上调用相同的 ajax function？ 使用codeigniter的多个ajax调用 Ajax jQuery：由不同页面构建的一页站点 如何使用Codeigniter从Ajax Jquery中的控制器获取多个参数？ 使用javascript从不同的div加载来自不同域的多个页面 不同页面上的多个HighCharts 不同页面上的ajax评论系统 Ajax 在 codeigniter 中获取多个值
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM