删除按钮ajax案例,Ajax项目实例-动态加载文章按钮

Ajax项目实例-动态加载文章按钮

在项目中要应用到动态加载更多的按钮，希望达到的功能是每次触发只会获取一定量的文章，而不会全部文章都返回，这样的话能减缓数据库和网络带宽的压力而且能带给用户比较好的体验。

效果图：

点击后可以获取更多的文章。

技术要点

由于我们用的是wordpress的框架，所以检索出想要的文章是一件重要事情，详情请看另一篇文章。

Ajax获取数据

为了美观还通过toggleClass的方式来实现按钮动态变换让他能出"Loading"的字样。

技术实现

我们先写好要用Ajax返回的内容的布局，我们希望Ajax能返回多块下面的数据每一块作为一篇文章，然后我们再将返回的数据直接append到文章列表下面，这样就可以做到动态加载文章的目的，暂且将这个页面称为Ajax页面。

//php

href=" the_permalink(); ?>

">

the_title(); ?>

$large_image_url =

wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'large');

$thumbnail_url = empty($large_image_url) ? get_template_directory_uri().'/images/thumbnail.jpg'

: $large_image_url[0]; ?>

the_excerpt(); ?>

当然我们在我们的基本页(亦即是用户访问会出现的页面)里面应该加上一个容器来承载文章，这个容器也是append的目标,这次我们的容器是ul

，因为我希望一篇文章作为一个里处理，而且加载按钮必须在容器外部，这样才方便调控。

//html

点击加载更多

容器和Ajax页面都写好了，我们就需要一个机制来让他们进行粘合，我们使用Jquery中Ajax的get方法来实现数据的获取，然后将获得的数据直接append到容器上。

//php

$(".btn-more").click(function(){

$.get("?ajax=1&page=" + page + "&s="

+ "

echo get_search_query()?>" ).done(function(responseText) {

var $items

= $(responseText);

$(".category-wrapper").append($items);

});

}).click();

用户优化

外观优化

为了美观需要我们点击按钮之后希望能实现点击后加载阶段按钮不能再次触发，而且按钮内容变为"Loading"，当获得数据的时候按钮淡出，如果还有更多的文章就在最后一篇文章的底部再淡出这个按钮。

首先我们需要在加载按钮上面作一些改动，我们在按钮上加上btn-more-spare的class为的是在Jquery阶段可以更好地找到这个元素(其实应该这个class更希望能达到样式和功能分开的效果，因为在Jquery会对按钮的class操作)。

//html

点击加载更多

我们需要在Jquery上面进行一些改动以达到功能

//Jquery

$(".btn-more").click(function(){

btn_more_spare.toggleClass("btn-more").html("Loading");

$.get("?ajax=1&page=" + page + "&s="

+ "

echo get_search_query()?>" ).done(function(responseText) {

btn_more_spare.fadeOut();

var $items

= $(responseText);

$(".category-wrapper").append($items);

btn_more.fadeIn();

});

}).click();

这样按下后就会有这样的效果了：

功能优化

我们还希望能够实现，如果已经没有文章需要加载了，就不显示这个按钮了。

实现的方式是通过判断返回的 li

数目来确定是否还需要继续加载(这里涉及两个问题，一个是边界问题，如果文章的数目恰好就等于你判断的数量条件，那么就出现按钮出现，但是按下去后没有新文章返回的情况；第二个是，我们获取的判断数量是wordpress的一个变量，所以这里需要调用wordpress的函数)，我们需要对Jquery进行优化：

//Jquery

$(".btn-more").click(function(){

btn_more_spare.toggleClass("btn-more").html("Loading");

$.get("?ajax=1&page=" + page + "&s="

+ "

echo get_search_query()?>" ).done(function(responseText) {

btn_more_spare.fadeOut();

var $items

= $(responseText);

$(".category-wrapper").append($items);

// 如果返回的文章数小于

page_size，表明已经没有更多

if($items.filter('li').length >= echo

get_query_var('posts_per_page');?>) {

btn_more_spare.toggleClass("btn-more").html("点击加载更多");

btn_more.fadeIn();

page +=

1;

}

});

}).click();

毕。