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

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

1. 加载jquery:http://code.jquery.com/jquery-1.10.2.min.js
2. 编写请求并处理数据的函数


// 标签云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文件里编写处理请求的函数


// 热门标签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来返回,具体的可以翻阅资料。当然了也可以返回静态数据,在这里写静态数据,格式还是那么工整,如:


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. 处理多个参数


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');