类别导航:
通知:目前网站正常哦!
你的位置:首页 >> 编程技术 >> wordpress ajax之七:随机动态显示名言

wordpress ajax之七:随机动态显示名言

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

1. 序言

对于如何使用ajax写主题请参考: 1. wordpress ajax之一:一个简单的例子 2. wordpress ajax之二:首页ajax分页 3. wordpress ajax之三:评论ajax分页 4. wordpress ajax之四:archive页面ajax分页 5. wordpress ajax之五:最近评论ajax分页 6. wordpress ajax之六:评论表情动态加载 这里再弄一个有趣的实例:动态的名言显示,点击显示下一个名言。 效果如本博客,可以看到在博客的右上部分有名言的显示,点击,等一会儿就可以看到下一个随机名言。

2. 需要的元素

和上篇讲到的一样,元素包括: 1. jquery.js,下载地址为:http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js 2. 定义的js文件,规定请求的动作,和接受数据之后的动作 dh_say_ajax.js 3. 定义点击评论框的操作dh_say_ajax.php 4. 放名言的页面 header.php

3. 元素的位置

1. jquery.js在header.php中包含,结算比较好的加载方法


注意
 /functions/jquery.min.js 
是自己的路径,注意填写自己的路径哦。 2. 把自己定义的js保存为 dh_say_ajax.js,同样在header.php中包含

3. 定义点击评论框的操作dh_say_ajax.php 放在主题下面即可,我是放在自己建立的functions/目录下 4. header.php里面写入调用代码

4. dh_say_ajax.js

将一下保存为dh_say_ajax.js文件
var dh_say_click='#dh_say';
var dh_say_content='#dh_say_content';
$(document).ready(function dh_say_ajax(){
	$(dh_say_click).click(function() {
		var z = $(this).attr("href");
		$.ajax({
			url: "",
			type:"POST",
			data:"action=dh_say_ajax",
			beforeSend:function()
			{
				document.body.style.cursor = 'wait';	
				//$(dh_say_content).html('载入中...');
				//$("#dh_say").animate({right:"300px"});
				//$("#dh_say").hide('slow');
				$("#dh_say").fadeTo("slow",0.00);
			},
			error: function(request) 
			{
				alert(request.responseText);
			},			
			success: function (data)
			{
				//$(dh_say_content).hide('slow');
				//alert(data);
				$("#dh_say").html(data);
				$("#dh_say").fadeTo("slow",1);
				document.body.style.cursor = 'auto';
				//dh_say_ajax();//翻页后DOM变化了,需要重新绑定函数
				//$(dh_say_content).show('fast');
			}
		});
		return false;
		});
})
js需要根据自己的网页中的css元素变化的哦。

5. dh_say_ajax.php

下面的代码保存为 dh_say_ajax.php文件,需要在functions.php中需要引用这个文件

functions.php中的代码
include("dh_say_ajax.php");

6 header.php的引用

这个看君的爱好选择放的位置,也可以不再header.php中。
	

7 寄语

希望大家成功

除非注明,文章均为灯火部落原创,转载请注明出处:wordpress ajax之七:随机动态显示名言-灯火部落
相关文章:
  • wordpress安全:处理垃圾评论(续3)-未经评论表格
  • wordpress:wordpress升级到3.3
  • wordpress ajax之七:随机动态显示名言(续)
  • wordpress安全:处理垃圾评论(续2)-Trackback攻击
  • 经验总结:没有备案,成功加入百度联盟
  • 友情推荐:体验电信免费WiFi宽带
  • ∧回到顶部∧