Ajax Codeigniter 中的无限滚动

Question

我正在使用 codeigniter 开发我的旅行社网站。我想在我的旅游或博客列表页面上使用无限滚动，每次滚动页面时我想获取 5 个项目，但是当 ajax 发送请求时，我一次只能获取一个数据..

这是我的控制器

//blog list & Views   
public function blogs()
    {
    $data = $this->data;
    $blogid = $this->uri->segment('3');
    if($blogid == NULL){
        $this->load->view('themes/ui/blogs/bloglist1', $data);     
    }else{
      $data['blogdata'] = $this->ui_model->blogdetails($blogid);
      $this->load->view('themes/ui/blogs/blogdetails1', $data);       
    }
}


//infinite scroll for blogs   
public function fetch_blogs()
 {
  $output = '';
  $limit = $this->input->post('limit');
  $start = $this->input->post('start');    
  $moredata = $this->ui_model->fetch_blogs($limit, $start);
  if($moredata->num_rows() > 0)
  {
   foreach($moredata->result() as $row)
    {
    
    $data['blogdata'] = array(
        'title' => $row->title,
        'banner' => $row->banner,
        'blogid' => $row->id,
        'slug' => $row->slug
        );   
       $output = $this->load->view('themes/ui/blogs/blog_grid1',$data,true);
   }  
      
  }
  echo $output;
 }

这是模型

function fetch_blogs($limit, $start)
     {
      $this->db->set_dbprefix('');    
      $this->db->select("*");
      $this->db->from("blogs");
      $this->db->order_by("id", "DESC");
      $this->db->limit($limit, $start);
      $query = $this->db->get();
      return $query;           
     }

这里是博客列表页面，jquery ajax 代码

<!DOCTYPE html>
<html lang="en">

<head>
</head>
<body>
<main>
<div class="row">
<div class="col-lg-8 col-xl-9">

<div class="mb-5 pb-1" id="load_data"></div>
<div class="mb-5 pb-1" id="load_data_message"></div>
 
</div>                   
</div>
</main>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {

            var limit = 5;
            var start = 0;
            var action = 'inactive';

            function lazzy_loader(limit) {
                var output = '';
                for (var count = 0; count < limit; count++) {
                    output += '<div class="post_data col-lg-12 col-xl-12 mb-3 mb-md-4 pb-1">';
                    output += '<p><span class="content-placeholder" style="width:100%; height: 200px;">&nbsp;</span></p>';
                    output += '<p><span class="content-placeholder" style="width:100%; height: 100px;">&nbsp;</span></p>';
                    output += '</div>';
                }
                $('#load_data_message').html(output);
            }

            lazzy_loader(limit);

            var csrfName = '<?php echo $this->security->get_csrf_token_name(); ?>',
                csrfHash = '<?php echo $this->security->get_csrf_hash(); ?>';

            function load_data(limit, start) {
                $.ajax({
                    url: "<?php echo base_url(); ?>en/fetch-blogs",
                    method: "POST",
                    data: {
                        [csrfName]: csrfHash,
                        limit: limit,
                        start: start
                    },
                    cache: false,
                    success: function(data) {
                        if (data == '') {
                            $('#load_data_message').html('<h3>No More Result Found</h3>');
                            action = 'active';
                        } else {
                            $('#load_data').append(data);
                            $('#load_data_message').html("");
                            action = 'inactive';
                        }
                    }
                })
            }

            if (action == 'inactive') {
                action = 'active';
                load_data(limit, start);
            }

            $(window).scroll(function() {
                if ($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive') {
                    lazzy_loader(limit);
                    action = 'active';
                    start = start + limit;
                    setTimeout(function() {
                        load_data(limit, start);
                    }, 1000);
                }
            });

        });

    </script>
</body>
</html>

这是视图blog_grid1.php

    <div class="mb-4">
<a class="d-block" href="<?=base_url();?>en/blogs/<?=$blogdata['blogid'];?>/<?=$blogdata['slug'];?>">
    <img class="img-fluid mb-4 rounded-xs w-100" src="<?=$blogdata['banner'];?>" alt="<?=$blogdata['title'];?>">
</a>
<h5 class="font-weight-bold font-size-21 text-gray-3">
    <a href="<?=base_url();?>en/blogs/<?=$blogdata['blogid'];?>/<?=$blogdata['slug'];?>"><?=$blogdata['title'];?></a>
</h5>
<div class="mb-3">
    <a class="mr-3 pr-1" href="#">
        <span class="font-weight-normal text-gray-3">May 21, 2020</span>
    </a>
    <a href="#">
        <span class="font-weight-normal text-primary">Tourism</span>
    </a>
</div>
</div>

这里的问题是“每次 ajax 发送请求时，它只得到一个响应结果..”

但是“如果我直接在控制器中编写“view_blog_grid1.php”的html代码，然后它按预期工作。

但我不想让控制器因大量 html 代码而变得混乱，而且我有多个网格模板，如 grid1、grid2、....，我想动态加载。

Answer 1

问题就在这里

$output = $this->load->view('themes/ui/blogs/blog_grid1',$data,true);

您正在为输出设置新值，这将只产生 foreach 循环中最后 (5th) 行，

要解决这个问题，只需将 $this->load->view('themes/ui/blogs/blog_grid1',$data,true) 附加到 $output 变量

$output .= $this->load->view('themes/ui/blogs/blog_grid1',$data,true);

NB* .= 运算符表示附加并等于 :

 $output = $output . $this->load->view('themes/ui/blogs/blog_grid1',$data,true)

Ajax Codeigniter 中的无限滚动

Ajax Infinite Scroll in Codeigniter

php

ajax

jquery

codeigniter-3