Home > Technology, WordPress > Ajax之jQuery

Ajax之jQuery

知道了一些基本的Ajax再来看jQuery的官方文档就比较容易理解了.我还是菜鸟.不能和大家来讨论更多的理论上的东西.很多人也不喜欢理论上的东西.所以这次我用jQuery的Ajax来做一个东西.—随机一句话.
大家也许注意到我的站点header部分能随机的现实一句话.单击还能刷新!怎么实现的.今天我们就一步一步做一个.哈哈.follow me.
服务器端代码是借鉴的wordpress自带的一个插件Hello Dolly.它能在后台随机显示一句话.但是不支持Ajax.我们要做的是把他弄到前台显示.并实现Ajax刷新的效果.

Step 1.
在主题functions.php里加入如下代码:

<?php
function Philna_some_words_to_show() {
$options = get_option('philna2_options');
$words ='
Hello, Dolly.
Hello world.
//other words.
';
	// Here we split it into lines
	$words = explode("\n", $words);
 
	// And then randomly choose a line
	return ($words[ mt_rand(0, count($words) - 1) ]);
}
function philna_say(){
	$chosen = Philna_some_words_to_show();
	echo '<p id="philna_say" title="'.__('Click to get a new one (Random)','philna2').'">'.$chosen.'</p>';
}
function philna_say_ajax(){
	if(isset($_GET['refresh'])){
	echo Philna_some_words_to_show();
	die();
	}
}
add_action('init', 'philna_say_ajax');
?>

Step 2.
主题需要的地方调用

<?php philna_say();?>

这样你已经实现了随机一句话显示.接下来实现Ajax.我们用jQuery来实现.

Step 3.
在js里加载如如下代码.(需要先加载jQuery类库)

var say=$('#philna_say');
say.click(function(){
$.ajax({
url:'?refresh',
type:'GET',
dataType:'html',
beforeSend:function(){
	say.css('color','#999').hide('slow');
	setTimeout(function(){say.html('<span id="sayload"></span>').show('fast');},500);
	},
error:function(request){
	say.html('Whoops! Something went wrong.Sorry');
	},
success:function(data){
setTimeout(function(){say.hide();say.html(data).show('slow');},2000);
say.css('color','#000');
}
})
});

Step 4.
你还需要写些CSS来控制样式.

好了完成了.今天就不讲什么理论了.主要是大家不喜欢(因为我上次检查文章的时候发现不少地方写错了.竟然过了两天也没有人出来指正.).我也懒.呵呵.

  1. mg12 Apr 20th, 2009 @ 20:51 | #1

    不会 jQuery 的飘过.

  2. Lorz Apr 20th, 2009 @ 20:52 | #2

    哇,不错的功能~~沙发!!!

  3. mg12 Apr 20th, 2009 @ 20:52 | #3

    继续抢座

  4. yinheli Apr 20th, 2009 @ 20:52 | #4

    妈呀….

  5. mg12 Apr 20th, 2009 @ 20:53 | #5

    前三个位置出售

  6. yinheli Apr 20th, 2009 @ 20:54 | #6

    今天是水厂了

  7. welee Apr 20th, 2009 @ 21:16 | #7

    原来 Hello Dolly 还有用处的哦?

  8. Someone Apr 20th, 2009 @ 21:27 | #8

    来晚了~貌似地板都没有了 :cry:

  9. Showfom Apr 20th, 2009 @ 21:46 | #9

    我是打酱油的。

  10. 会律博客 Apr 20th, 2009 @ 22:04 | #10

    好久没来,这里也开始泛滥了!

  11. yinheli Apr 20th, 2009 @ 22:25 | #11

    @welee
    哈哈.我们哲学老师说,万物皆有用.

    @Someone
    你名字?奇怪

    @Showfom
    (- -!)

    @会律博客
    :cool: 托大师们的福.托大家的福.

  12. TryLife Apr 20th, 2009 @ 23:34 | #12

    后排

  13. welee Apr 21st, 2009 @ 02:39 | #13

    要离开了?会暂停更新吗?你不在我们会很寂寞的 :cry:

  14. Leeiio Apr 21st, 2009 @ 09:32 | #14

    加个控制面板,然后又一个插件诞生了。
    最近特忙,你的技术文章我都标记未读了,正准备都有空再研读。

  15. 吖Bee Apr 21st, 2009 @ 13:09 | #15

    啊~去到10N多啦~~这么后了…

  16. yinheli Apr 22nd, 2009 @ 12:43 | #16

    @welee
    哈哈,说的我心里暗爽.不过有些事情也是不得已.重要的是我们都保持了一颗学习的心.

    @Leeiio
    我已经整合到主题里面了.在做插件~晕.

    @吖Bee
    哈哈~

  17. Drifter Apr 22nd, 2009 @ 21:24 | #17

    有个问题请教一下~
    如果某个插件使用wp_enqueue_script( ‘jquery’ )引入jQuery,而我又在主题里使用了google的版本,除了修改插件外,我只想到用wp_deregister_script和wp_register_script来替换。但是这样的话加载js的语句又会放在页面的首部了 :cry:
    有什么好办法么? :arrow:

  18. yinheli Apr 22nd, 2009 @ 21:37 | #18

    @Drifter
    好像没有,没有具体想过.不过对于追求速度的博主来讲.他们固定使用插件后就会完全对footer和header静态.去掉<?php wp_head(); ?>这样代码. :lol:

  19. Drifter Apr 22nd, 2009 @ 21:47 | #19

    @yinheli
    算了~那我还是先让js在首部吧……
    号称wp2.8的wp_enqueue_script可以支持在页脚加载,等待… :cool:

  20. feicun Apr 23rd, 2009 @ 18:48 | #20

    呃……记不清是不是第一次来留言了,不管了,以后会常来,跟你学东西~~

  21. 佰草集 Apr 23rd, 2009 @ 19:21 | #21

    额,想学,但看见密密麻麻的字母就不行了。。

  22. yinheli Apr 23rd, 2009 @ 22:06 | #22

    @feicun
    你来过好几次啦.哈哈

  23. Hobosic Apr 24th, 2009 @ 11:45 | #23

    Hi,
    Super post, Need to mark it on Digg
    Hobosic

  24. Y.Jiajia May 7th, 2009 @ 23:06 | #24

    这样做不好吧,其实就是把整个页面伪刷新一次,这样流量会倍增的。还是应该把这个函数单独写在一个PHP里好些。呵呵 :grin:

  25. yinheli May 11th, 2009 @ 14:31 | #25

    @Y.Jiajia
    没有明白什么是为刷新?
    我用了add_action(‘init’, ‘philna_say_ajax’)这样返回来的数据只是那句话.你可以测试.这个和单独用了php文件的意思是一样的.你可以试试.

Submitting Comment, Give me a second...
Comment pages 1 2

Leave a comment

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
Trackbacks & Pingbacks ( 2 )
  1. May 12th, 2010 @ 02:02 | #1
    Pingback: jQuery+Ajax在wordpress中的应用(二) – 电脑网络 – ajax – jQuery – WordPress – Winy Sky
  2. Jun 1st, 2010 @ 00:38 | #2
    Pingback: 添加”随机一句话” | ③秋之流☆'s Blog