代码之家  ›  专栏  ›  技术社区  ›  Codecraker

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

  •  -1
  • Codecraker  · 技术社区  · 7 年前

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

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

    模型

     function fetch_data($limit, $start,$line,$slug)
     {
    
        $this->db->order_by('cv_products.id', 'DESC');
    
        $this->db->select('cv_products.*, cv_category.name as categoryname,product_line.id as lineid, product_line.name as linename,cv_category.id as category_id,delivery_time.id as deliverid, delivery_time.name as timingname' );
    
        $this->db->join('cv_category','cv_category.id = cv_products.category', 'left');
    
        $this->db->join('product_line','product_line.id = cv_products.product_line', 'left');
    
        $this->db->join('delivery_time','delivery_time.id = cv_products.timing', 'left');
    
    
    
        $this->db->from('cv_products');
        $this->db->where('cv_products.product_line' , $line);
        $this->db->where('product_line.slug' , $slug);
        $this->db->limit($limit, $start);
        $query = $this->db->get();
        return $query;
     }
    

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

    1 回复  |  直到 7 年前
        1
  •  1
  •   Samir Selia    7 年前

    您尚未传递值 line 和 slug load_data 在…内 scroll 方法。

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