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. Y.Jiajia May 11th, 2009 @ 16:03 | #26

    @yinheli
    恩,我看错了,我以为会传回传整个index页后然后调用Philna_some_words_to_show。我最近也在研究jQuery的Ajax :smile:

  2. LAONB May 12th, 2009 @ 01:56 | #27

    似乎你的主题就带这功能,看到几个博客都这样,不过有的会出错,点了下面正文就乱码了。

  3. Xiaoding May 13th, 2009 @ 16:55 | #28

    @Drifter
    没有别的办法。。 要么忍着 要么自己改代码 。。

    俺已经把主题的head部分改得只剩一个 CSS 了,还盗版了 awflasher 的进度条。。

  4. storyday.com May 24th, 2009 @ 13:12 | #29

    哇,这里这么热闹,来凑个热闹

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 ( 0 )
  1. No trackbacks yet.