您的位置: 首页  >  技术问答  >  Codeigniter 3多个来自2个不同页面的多个Ajax

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

分类: 技术问答 • 2022-09-07 22:47:11
问题描述：

我迫切需要一个代码审查，我不知道在哪里可以问这个，但在这里。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); 
    } 
}

资料查看：

纵断面图中有注释的部分：

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

    }); 

});

我这里结束的目标是与喜欢/不喜欢数据尽可能快地加载配置文件后。我不想找人为我做这项工作（除非你也想:)），但任何帮助将不胜感激。有人可以帮我重构我的代码吗？

答

所以，当你已经想通了：

的问题是，我想提出一个Ajax调用针对其共服用60秒的加载所有数据的每个评论。

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

另一个问题是您打开一个连接为您的每个评论。这非常耗时。如果您打开开发工具，请转到Chrome中的“时间轴”选项卡，如Firefox中的“网络分析”，您会看到每一个注释加载并花费时间。

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

你这样做的方式就是你的事。这里只是2想法我有：

  1. 你可以写下来笨的likes-和不喜欢的部分，以及与包括它已经在意见段，所以你只需要一个AJAX调用。
  2. 您可以创建一个网站（例如profile_posts本身），加载所有帖子，包括其喜欢/不喜欢的内容，并以JSON格式输出。所有进一步处理将在JS（正确的HTML标记等）
+0

谢谢。我会尝试2个建议。我的第一个问题是，当我尝试在我喜欢的表上进行内部连接时，它仅返回登录用户喜欢的评论。我会继续尝试几件事，但我完全失去了。 – iamthestreets

+0

我能够实现号码1，并只进行一次ajax呼叫，但我遇到了另一个问题。我想我会为它创建一个新问题。非常感谢！ – iamthestreets

相关推荐