Php 无法使用AJAX在codeigniter中获取延迟加载数据

Php 无法使用AJAX在codeigniter中获取延迟加载数据,php,mysql,ajax,codeigniter,lazy-loading,Php,Mysql,Ajax,Codeigniter,Lazy Loading,我正在做一个电子商务网站。只是想实现延迟加载。我可以在第一次加载时获取数据,但如果向下滚动,则无法获取任何数据 **HTML CODE** <div class="row" id="fetchedprodducts"> <div class="row" id="load_data_message"></div> <div id="load_data"></div> </div>

我正在做一个电子商务网站。只是想实现延迟加载。我可以在第一次加载时获取数据,但如果向下滚动,则无法获取任何数据

**HTML CODE**

    <div class="row" id="fetchedprodducts">
        <div class="row" id="load_data_message"></div>
        <div id="load_data"></div>
    </div>
**CSS**
        @-webkit-keyframes placeHolderShimmer {
          0% {
            background-position: -468px 0;
          }
          100% {
            background-position: 468px 0;
          }
        }

        @keyframes placeHolderShimmer {
          0% {
            background-position: -468px 0;
          }
          100% {
            background-position: 468px 0;
          }
        }

        .content-placeholder {
          display: inline-block;
          -webkit-animation-duration: 1s;
          animation-duration: 1s;
          -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
          -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
          -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
          -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
          background: #f6f7f8;
          background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
          background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
          background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
          -webkit-background-size: 800px 104px;
          background-size: 800px 104px;
          height: inherit;
          position: relative;
        }

        .post_data
        {
          padding:24px;
          border:1px solid #f9f9f9;
          border-radius: 5px;
          margin-bottom: 24px;
          box-shadow: 0px 0px 5px #eeeeee;
        }

**AJAX**

    <script>
          $(document).ready(function(){
              var url = window.location.href;
              var idx = url.indexOf("product");
              var slugx = url.indexOf("product");
              var slug = url.substring(idx).split("/")[1];
              var line = url.substring(slugx).split("/")[2];

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

              function lazy_load(limit){
                  var output = '';
                  for(var count = 0; count < limit; count++)
                  {

                    output += '<div class="post_data col-md-4 col-12">';
                    output += '<p><span class="content-placeholder" style="width:90%; height: 30px;">&nbsp;</span></p>';
                    output += '<p><span class="content-placeholder" style="width:90%; height: 80px;">&nbsp;</span></p>';
                    output += '</div>';
                  }
                  $('#load_data_msg').html(output);
              }
              lazy_load(limit,slug,line);

              function load_data(limit,start,slug,line)
              {
                $.ajax({

                   url:BASE_URL+'front/Products/fetch',
                   method:"POST",
                   data:{limit:limit,start:start,slug:slug,line:line},
                   cache: false,
                   success:function(data)
                   {
                    if(data == '')
                    {
                      $('load_data_msg').html('<h3> No Product is available </h3>');
                    }
                    else{
                        $('#fetchedprodducts').append(data);
                        $('#load_data_msg').html("");
                        action =  'inactive';
                    }
                   }

                });
              }

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

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

**Controller**

    public function fetch(){
       $output ='';
       $limit = $this->input->post('limit');
       $start = $this->input->post('start');
       $line = $this->input->post('line');
       $slug = $this->input->post('slug');
       $data = $this->Userfront_model->fetch_data($limit,$start ,$line,$slug);

      if($data->num_rows() > 0){
       foreach($data->result() as $row)
       {
          $output .= "<div class='post_data col-md-3 col-6'>
                      <a class='all-link--pro' href='" . site_url('product_view/' . $row->id . "/" . $row->slug ) . "'>   
                      <img style='box-shadow: 0px 0px 22px 0px #616161' class='img-fluid img-size' src='" . base_url('assets/img/posts/' . $row->main_img) . " '>
                      <p>" . $row->title . "</p>
                      <p> <b>" . $row->uniquecode. "</b> </p>
                      <p>Rs " . $row->price. "</p>
                     </a> 
                  </div>";
       }
      }
        echo $output;

    }
我能够获取前8个产品,但在滚动时无法获取其余产品。 注意:
如果我从模型中删除where子句,它将正常工作

您还没有将值
段塞
传递给函数调用
加载数据
内部
滚动
方法

$(window).scroll(function(){
      if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive')
      {
            lazy_load(limit);
            action = 'active';
            start = start + limit;
            setTimeout(function(){
              load_data(limit, start, line, slug); // pass missing parameters here
            }, 1000);
       }
});

它甚至可以进入滚动功能吗?在其内部的
lazy_load(limit)上方发出警报方法调用。如果我从模型中删除
where
子句,那么它工作得很好。这是因为,在函数调用
load\u data(limit,start)中没有提供其他两个参数
line
slug
在滚动方法下。给定参数,但不工作当您在滚动方法中显示值时,它是否打印任何值
$(window).scroll(function(){
      if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive')
      {
            lazy_load(limit);
            action = 'active';
            start = start + limit;
            setTimeout(function(){
              load_data(limit, start, line, slug); // pass missing parameters here
            }, 1000);
       }
});