Php 代码点火器中的Ajax无限滚动
我正在使用codeigniter开发我的旅行社网站。我想在我的旅游或博客列表页面上使用无限滚动，我想每次滚动页面时获取5个项目， 但当ajax发送请求时，我一次只能获取一个数据 这是我的控制器Php 代码点火器中的Ajax无限滚动,php,jquery,ajax,codeigniter-3,Php,Jquery,Ajax,Codeigniter 3,我正在使用codeigniter开发我的旅行社网站。我想在我的旅游或博客列表页面上使用无限滚动，我想每次滚动页面时获取5个项目， 但当ajax发送请求时，我一次只能获取一个数据 这是我的控制器 //blog list & Views public function blogs() { $data = $this->data; $blogid = $this->uri->segment('3'); if($blogid == NULL
//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;
}
<!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;"> </span></p>';
output += '<p><span class="content-placeholder" style="width:100%; height: 100px;"> </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>
$（文档）.ready（函数（）{
风险价值限额=5；
var start=0；
var action=‘不活动’；
功能lazzy_加载器（限制）{
var输出=“”；
对于（变量计数=0；计数<限制；计数++）{
输出+=''；
输出+=''；
输出+=''；
输出+=''；
}
$（'load#u data_message'）.html（输出）；
}
lazzy_装载机（限位）；
var csrfName=“”，
csrfHash=''；
功能加载\u数据（限制、启动）{
$.ajax({
url:“en/fetch blogs”，
方法：“张贴”，
数据：{
[csrfName]：csrfHash，
极限：极限，
开始：开始
},
cache:false，
成功：功能（数据）{
如果（数据=“”）{
$（'load#u data_message'）.html（'No More Result Found'）；
动作='活动'；
}否则{
$（'load#u data'）。追加（数据）；
$（'load#u data_message'）.html（“”）；
动作='不活动'；
}
}
})
}
如果（操作=='inactive'）{
动作='活动'；
加载_数据（限制、启动）；
}
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）+$（窗口）.height（）>$（“#加载#u数据”）.height（）&&action='inactive'）{
lazzy_装载机（限位）；
动作='活动'；
开始=开始+限制；
setTimeout（函数（）{
加载_数据（限制、启动）；
}, 1000);
}
});
});
<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>
$output = $this->load->view('themes/ui/blogs/blog_grid1',$data,true);
（第5）$this->load->view（'themes/ui/blogs/blog\u grid1'，$data，true）$output$output .= $this->load->view('themes/ui/blogs/blog_grid1',$data,true);
= $output = $output . $this->load->view('themes/ui/blogs/blog_grid1',$data,true)
有关于目标的例子吗？你是说每个ajax请求，我都会得到相同的结果，比如只获取帖子1-5个否，在每个ajax请求中，我只获取一个项目作为结果，从1-5个结果中取第一个，然后在下一个请求中，从6-10个结果中取第六个，从11-15个结果中取第11个。在每个请求中，“4个结果”没有显示。是的，这里是链接。。（在此url上，您将在滚动条上看到ajax请求和响应）…但是如果我将“view_blog_grid1.php”的html代码直接放在$output变量的controller方法中，那么它工作得很好。请尝试回答。谢谢，伙计！它工作了。我现在就知道了