知道了一些基本的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来控制样式.
好了完成了.今天就不讲什么理论了.主要是大家不喜欢(因为我上次检查文章的时候发现不少地方写错了.竟然过了两天也没有人出来指正.).我也懒.呵呵.
声明:本站遵循署名-非商业性使用-相同方式共享3.0共享协议. 转载请注明转自 PhilNa ™
@yinheli
恩,我看错了,我以为会传回传整个index页后然后调用Philna_some_words_to_show。我最近也在研究jQuery的Ajax