如何在此 Codeigniter 应用程序中通过 jQuery Ajax 加载特定数据,而不是整个页面?
Posted
技术标签:
【中文标题】如何在此 Codeigniter 应用程序中通过 jQuery Ajax 加载特定数据,而不是整个页面?【英文标题】:How do I load specific data via jQuery Ajax in this Codeigniter application, instead of the entire page? 【发布时间】:2021-11-29 05:06:59 【问题描述】:我一直在使用 CodeIgniter 3.1.8 和 Twitter Bootstrap 4 开发在线 newspaper/blogging application。我目前正在处理 延迟加载 em>(帖子)特征。
默认情况下,帖子是分页显示的,一次显示 12 个,http://myblog.com/
、http://myblog.com/?page=2
等等。
在application\controllers\Posts.php
我有
private function _initPagination($path, $totalRows, $query_string_segment = 'page')
//load and configure pagination
$this->load->library('pagination');
$config['base_url'] = base_url($path);
$config['query_string_segment'] = $query_string_segment;
$config['enable_query_strings'] = TRUE;
$config['reuse_query_string'] = TRUE;
$config['total_rows'] = $totalRows;
$config['per_page'] = 12;
if($this->Static_model->get_static_data()['has_pager'])
$config['display_pages'] = FALSE;
$config['first_link'] = FALSE;
$config['last_link'] = FALSE;
$config['prev_tag_open'] = '<li class="prev">';
$config['prev_tag_close'] = '</li>';
$config['next_tag_open'] = '<li class="next">';
$config['next_tag_close'] = '</li>';
if (!isset($_GET[$config['query_string_segment']]) || $_GET[$config['query_string_segment']] < 1)
$_GET[$config['query_string_segment']] = 1;
$this->pagination->initialize($config);
$limit = $config['per_page'];
$offset = ($this->input->get($config['query_string_segment']) - 1) * $limit;
return array(
'limit' => $limit,
'offset' => $offset
);
public function index()
//call initialization method
$config = $this->_initPagination("/", $this->Posts_model->get_num_rows());
$data = $this->Static_model->get_static_data();
$data['base_url'] = base_url("/");
$data['pages'] = $this->Pages_model->get_pages();
$data['categories'] = $this->Categories_model->get_categories();
$data['search_errors'] = validation_errors();
//use limit and offset returned by _initPaginator method
$data['posts'] = $this->Posts_model->get_posts($config['limit'], $config['offset']);
$this->twig->addGlobal('pagination', $this->pagination->create_links());
// featured posts
if ($data['is_featured'])
$data['featured'] = $this->Posts_model->featured_posts();
$this->twig->addGlobal('featuredPosts', "themes/$data['theme_directory']/partials/hero.twig");
$this->twig->display("themes/$data['theme_directory']/layout", $data);
为了改为通过 jQuery Ajax 加载帖子,我有:
(function($)
var currentPage = 1;
// Hide pahination
$('.pagination').hide();
$(window).scroll(function()
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10)
loadMore();
);
function loadMore()
$.ajax(
url: baseUrl + '?page=' + currentPage,
type: 'POST',
beforeSend: function()
$('.loader').show();
)
.done(function(data)
$('.loader').hide();
// Append new posts to the posta container
$("#postsContainer").append(data);
currentPage = currentPage + 1;
);
)(jQuery);
html
<div class="col-lg-8 col-md-10 mx-auto" id="postsContainer">
<div class="post-preview">
<a href="http://myblog.com/learn-to-code-with-us-for-a-better-future">
<h2 class="post-title">Learn to code with us, for a better future</h2>
<h3 class="post-subtitle">Learn to code with us. We have the best teachers in the country.</h3>
</a>
<p class="post-meta">
Posted in <a href="http://myblog.com/categories/posts/1" title="All posts in Uncategorized">Uncategorized</a>, on Nov 19, 2019
</p>
</div>
<hr>
...
</div>
问题
由于我无法弄清楚的原因,当我滚动到页面底部时,不是将帖子附加到帖子容器,而是附加了整个页面。
我的错误在哪里?
【问题讨论】:
显示 HTML 部分。 @msrumon 我已经添加了 HTML。也看看 pull request。 你在数据中得到了什么?你能分享一下回复吗? @KaushikThakkar 页面的整个 HTML。 你检查过从this HTTP 请求得到的响应吗? 【参考方案1】:您似乎正在尝试使用分页数据重新加载整个页面 - 这是一种非常糟糕的做法。从长远来看,您最终会以这种方式获得较慢的页面。
您最好为您的 AJAX 设置一个单独的端点,该端点输出一个 HTML 字符串的 JSON 数组,每个帖子一个。这仍然比使用像 Codeigniter 和 React 这样的 2 层解决方案要慢,但肯定比不断重新渲染整个 UI 更快。
【讨论】:
【参考方案2】:我有一个可行的解决方案:
(function($)
var currentPage = 2,
maxPage = $('#postsContainer').data('max-page'),
posts = null;
$('.pagination').hide();
$(window).scroll(function()
var toBottom = $(window).scrollTop() >= $(document).height() - $(window).height() - 25;
if (toBottom && currentPage <= maxPage)
loadMore();
);
function loadMore()
$.ajax(
url: baseUrl + '?page=' + currentPage,
type: 'GET',
beforeSend: function()
if (typeof posts != 'undefined')
$('.loader').show();
)
.done(function(data)
$('.loader').hide();
posts = $(data).find('#postsContainer').html();
if (typeof posts != 'undefined')
$('#postsContainer').append(posts);
currentPage = currentPage + 1;
if (currentPage > maxPage)
$('#postsContainer').append('<p class="text-center text-muted">No more posts to load</p>');
);
)(jQuery);
【讨论】:
以上是关于如何在此 Codeigniter 应用程序中通过 jQuery Ajax 加载特定数据,而不是整个页面?的主要内容,如果未能解决你的问题,请参考以下文章
在 CodeIgniter 中通过 jQuery AJAX 插入和移动多个图像 [重复]
在 Codeigniter 3 中通过 Office365 帐户发送电子邮件 - 连接超时
如何在 Windows 中通过随机分层源图像来自动生成合成图像?