【发布时间】：2020-06-23 04:50:05
【问题描述】：
我正在使用 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代码所在的bloglist页面
<!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>
这是查看 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、....，我想动态加载。
【问题讨论】：
-
有什么目标例子吗？
-
你的意思是
each ajax request, i just get same result喜欢只获取帖子 1-5 -
不，在每个 ajax 请求中，我只得到一个结果，1-5 结果中的第一个，然后在下一个请求中，它是 6-10 结果中的第 6 个，下一个 11-15 结果中的第 11 个.在每个请求中“4 个结果”没有得到显示。
-
是的，这里是链接..api.happyvoyaging.com/en/blogs（在这个网址上，你会看到滚动的ajax请求和响应）..但是如果我直接把“view_blog_grid1.php”的html代码放在在 $output 变量的控制器方法中，然后它工作正常。
-
请尝试 Illya 回答。
标签： php jquery ajax codeigniter-3