前端开发中,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');
1 2

