轩枫阁

首页 / Web前端 / 授人以渔 / JQuery / WP Ajax异步刷新 – wordpress中通过ajax获取信息

WP Ajax异步刷新 – wordpress中通过ajax获取信息

阅读：18702 评论：4 作者：ivan 分类：JQuery、WordPress、授人以渔

了解之后，你会发现WP中使用ajax是如此的简单，今天心情好，多写点文章~

简介

前端开发中，ajax是必不可少的，可以带来用户体验的提升。但是如果是使用WP，便觉得不知道如何下手了。比如要返回一些固定的数据（一般不更改），或者返回一些文章内容、标签、文章列表等等。下面做个简单的教程：

示例

一、侧边栏中ajax获取并刷新标签

1. 加载jquery：http://code.jquery.com/jquery-1.10.2.min.js

2. 编写请求并处理数据的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 标签云ajax
$(".tag_change").click(function(){
        $.ajax({
            //后台根据action返回相应数据
            url: http://www.xuanfengge.com/?action=tag,
            type: 'get',
            beforeSend: function() {
                // 可以显示loading
            },
            error: function(error) {
        // 错误处理
            },
            success: function(data) {
                // 成功返回数据，先清空初始标签，装载新数据淡入
                $(".tag_content").empty().append($(data).fadeIn(200));
            }
        });
        return false;
    });

3. 在function.php文件里编写处理请求的函数

1
2
3
4
5
6
7
8
9
10
11
12
// 热门标签ajax部分，判断action，返回数据
function tagLoad(){
    if( isset($_GET['action'])){
        if($_GET['action'] == 'tag'  ){
            // 随机输出32条标签
            echo wp_tag_cloud('smallest=10&largest=14&number=32&order=RAND');
            die;
        }
    }
}
// 将函数连接到指定action（动作）
add_action('init', 'tagLoad');

4. 获取数据

数据的获取一般是使用WP的API来返回，具体的可以翻阅资料。当然了也可以返回静态数据，在这里写静态数据，格式还是那么工整，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function fav_save(){
  if( isset($_GET['action'])){
    if($_GET['action'] == 'fav_save'  ){
        ?>
 
<!-- start -->
<section id="fav_backup">
    <h4 class="cf">安全备份</h4>
    <a class="fav_clear fav_btn" href="javascript:;">一键清空数据</a>
    <a class="fav_recover fav_btn" href="javascript:;">一键恢复数据</a>
</section>
<!-- end -->
 
<?php
        die;
        }
    }
}
add_action('init', 'fav_save');

5. 处理多个参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
URL：http://www.xuanfengge.com/?action=ajax_slidepage&page=2
 
PHP:  获取action和page的值；显示相应的内容
function AjaxLoad(){
if( isset($_GET['action'])){
            if($_GET['action'] == 'ajax_slidepage'  ){
                if($_GET['page'] == '2'){
                echo '<ul>';
                get_most_viewed('',8,0 ,0 ,' 次浏览');   //返回所请求页的数据
                echo '</ul><p>';
                }
                else{
                echo '<ul>';
                get_archives('postbypost', 8);      //返回默认数据
                echo '</ul><p>';
                }
            die;
            }
}
}
addaction('init', 'AjaxLoad');

 

二、获取文章分类页的下一页文章数据

分析：这个和上面的不太一样，这里只需要指定下一页的链接，点击时更新文章数据同时更新下一页链接就行

HTML：下一页文章链接、loading图标

1
2
3
4
<div class="load_more">
     <?php next_posts_link( __( '加载更多', 'lee' ) ); ?>    //链接地址
     <em class="loading_icon"></em>                      //loading图标
</div>

CSS：具体样式请查看轩枫阁分类页效果

JS：将返回的数据添加至页面，更新链接，同时也要防止在返回数据前的多次点击

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
//分类页ajax翻页
if(!$(".load_more a").length){
    $(".load_more").remove();  //判断是否含有下一页
}
//是否正在加载
var onloading = false;
$("#wrapper").on("click",".load_more a",function() {
    if(onloading){
        return false;
    }else{
        $.ajax({
            type: "get",
            url: $(this).attr("href"),
            beforeSend: function(xhr) {
                xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                $(".load_more").find("a").text("加载中...");
                $(".load_more em").show();
                onloading = true;
            },
            error: function(request) {
                console.log(request.responseText);
            },
            statusCode: {
                 404: function() {
                     console.log("404");
                 }
            },
            success: function(data) {
                               //获取文章所在的DOM及下一页链接
                var result = $(data).find("#main .article");
                var nextHref = $(data).find(".load_more a").attr("href");
                // 渐显新内容
                $(".load_more").before(result.fadeIn(400));
                $(".load_more em").hide();        
                $(".load_more").find("a").text("加载更多");
                if (nextHref != undefined) {
                    $(".load_more a").attr("href", nextHref);
                } else {  // 若没有链接，即为最后一页，则移除导航
                    $(".load_more").remove();
                }
                onloading = false;
            }
        });
    }
    return false;
});
 
// 给浏览器窗口绑定 scroll 事件
$(window).on("scroll",function() {
    var windowH = $(window).height();
    var documentH = $(document).height();
    // 判断窗口的滚动条是否接近页面底部
    if ($(document).scrollTop() + windowH > documentH - 100) {
        if(onloading){
            return false;
        }else{
                        //滚动到页面底部时，自动触发点击下一页
            $(".load_more a").click();
        }
    }
});

 总结

使用ajax，能提升用户体验，但是也会给SEO带来影响，因为搜索引擎的爬虫爬取不到下一页甚至更多页的内容。但还是有方法解决的，比如直接在首页添加网站地图，使用SEO插件等等。

283/470
285/470

相关阅读

文章评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制，可以录制弹奏的曲子
    开始录制 完成录制 取消
    马上试听 重新录制 提交此曲
    分享钢琴节奏： 新浪微博 QQ空间