类别导航:
通知:目前网站正常哦!
你的位置:首页 >> 编程技术 >> wordpress ajax之一:一个简单的例子

wordpress ajax之一:一个简单的例子

发表日期:2011-08-08 作者:DH分类:编程技术 标签: wordpress ajax
索引[隐藏]

序言

今天是星期一,是我发文章的日子。最近在搞一个东西,就是将ajax运用到wordpress中,大家可以看我的博客,里面有很多的ajax的东西,包括: 1.首页的分页的ajax 2.评论分页的ajax 3.侧边栏评论的最近评论ajax 4.评论ajax提交 后面的文章将逐步介绍如何实现上面的ajax功能,这篇文章的主要目的是让大家了解ajax的用法,用一个简单的例子说明ajax的使用,让大家能很快上手ajax,写出自己需要的ajax程序。

ajax的优缺点

缺点: 1. 各个浏览器对XMLHttpRequest对象的支持度不足(兼容性问题) 2. 破坏浏览器的前进,后退功能。 3. 对搜索引擎支持不足。 4. 调试工具支持不足。 5. 编程比较复杂 6. 需要多加载jquery.js和自定义的js,第一次加载会影响速度 优点: 1. 加载需要的页面,避免重复加载 2. 使用使用时的体验较好 3. 可以装一下,毕竟主题支持动态加载,nb啊,呵呵

ajax的需要的元素

元素包括: 1. 一个html页面,这里包含了有css标记的元素,比如a,可以供js来寻找,在用户点击的时候发出ajax请求 2. jquery.js,下载地址为:http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js 3. 定义的js文件,规定请求的动作,和接受数据之后的动作 4. 后台模板中的functions.php定义一个函数,用了规定接受到ajax请求之后后台要做的动作。 元素的位置: 1. html就在文章中写即可 2. jquery.js在header.php中包含

3.把自己定义的js保存为 test.js,同样在header.php中包含

4.functions.php中添加行数即可

例子的运行情况

返回结果的位置
请点击上面的“第一页”等,后台会返回你的请求之后的处理结果

html部分

你随便写一个文章,用html模式,把下面的代码贴进去就可以了。注意将 http://dhblog.org/?navi=2 换成你的http://自己域名/?navi=2
返回结果的位置

js部分

下面的代码保存为 test.js文件,放到模板里面,记得在header.php中包含哦
var tnavi='.test_navi';
var tnavi_a='.test_navi a';
var tresponse='.test_response';

$(document).ready(function test_navi(){
	$(tnavi_a).click(function() {
		var z = $(this).attr("href");
		$.ajax({
			url: z,
			type:"POST",
			data:"action=test_action",
			beforeSend:function()
			{
				document.body.style.cursor = 'wait';
				var C=0.7;
				$(tresponse).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});				
				$(tnavi).html('载入中...');
			},
			error:function (xhr, textStatus, thrownError){ 
				alert("readyState: " + xhr.readyState + " status:" + xhr.status + " statusText:" + xhr.statusText +" responseText:" +xhr.responseText + " responseXML:" + xhr.responseXML + " onreadystatechange" +xhr.onreadystatechange); 		
				alert(thrownError); 
			},	
			success: function (data)
			{
				//alert(data);
				$(tresponse).html(data);				
				document.body.style.cursor = 'auto';
				test_navi();//翻页后DOM变化了,需要重新绑定函数
			}
		});
		return false;
		});
})

后台php部分

下面的代码放到functiongs.php中,http://dhblog.org/?navi=2 换成你的http://自己域名/?navi=2
/*****************************************************
 函数名称:test_action_do
 函数作用:简单的ajax的例子
 行数作者:dhblog
******************************************************/

function test_action_do(){
	if( isset($_POST['action'])&& $_POST['action'] == 'test_action'){
		$navi=$_GET['navi'];
		echo '
'; echo '
我是ajax返回的结果哦!您选择的第'. $navi .'页
'; echo '
'; echo '第一页 '; echo '第二页 '; echo '第三页'; echo '
'; echo '
'; die(); }else{ return; } } add_action('template_redirect', 'test_action_do');
希望大家通过上面的例子能够理解ajax的工作过程,能做好ajax学习的第一步!

除非注明,文章均为灯火部落原创,转载请注明出处:wordpress ajax之一:一个简单的例子-灯火部落
相关文章:
  • wordpress主题:增加帅哥认证标识(续)
  • wordpress主题:增加最多评论功能
  • wordpress ajax之二:首页ajax分页
  • 域名空间:域名被劫持,恐怖啊
  • wordpress ajax之三:评论ajax分页
  • 友情推荐:知蚁博客站长助手软件
  • ∧回到顶部∧