wordpress实现ajax异步加载内容

十度 wordpress 2015年12月20日 收藏

我们如果要静态化wordpress得页面时,就必须对一些动态的信息进行ajax异步加载,现在js框架比较流行的jQuery所以本文也是讲的ajax也是使用jQuery的技术。
如果你对jQuery不了解可查看他的官网:http://jquery.com/或者查看jQuery教程:http://www.w3school.com.cn/jquery/

1、接下来我们在我们的主题的js文件中加入如下代码:

(function($) {
	$.ajax({
		url: 'http://www.shouce.ren/?action=ajax', //域名换成你要用的
		type: 'get',
		beforeSend: function() {
			var loading = '<span class="loadsidebar"></span>';
			$('#body').empty().html(loading)  //显示loading
		},
		error: function(a) {
			$('body').hide().empty().html('<div style="text-align:center;padding-top:20px;">还木有载好</div>').fadeIn('fast')
		},   //错误时输出
		success: function(a) {
			$('body').empty().html(a) //成功时输出神马
		}
	});
})(jQuery);

本地代码加载js文件后直接调用,你也可以使用鼠标移过事件hover或者click事件来触发ajax请求。

2、在我们主题的functions.php文件中添加如下代码:

function ajax_load(){
 
    if( isset($_GET['action'])){
        if($_GET['action'] == 'ajax'  ){
            echo '我是异步获取的'; //你可以根据需要输出,比如输出最新评论,最新文章,最新热门文章等。
            exit;
        }
    }
 
}
add_action('init', 'ajax_load');

代码解释:wordpress在初始化时调用ajax_load函数。