上一次的文章可能說的太含糊了，所以部分朋友提出了一些疑問（我太偷懶了），所以經(jīng)過很很長時間的考慮，終于決定在今天寫第二部分。相對于前一篇，本篇是威力加強版，增加的內(nèi)容主要有：1、如何輸入兩個參數(shù)；2、提供完整的代碼。歡迎繼續(xù)觀看。
上篇鏈接：ajax獲取wordpress邊欄信息（一）
jquery官方給出的ajax的例子不再敘述，相信很多同學(xué)由于英語或者其他原因，看了也是有點不太明白腫么回事。我這里主要說說在 wordpress里怎樣通過它來控制側(cè)邊欄的異步獲取和輸出，就像前一篇所說的那樣。還有某些朋友好奇的：目前的ink主題側(cè)欄的點擊某項目才調(diào)取相關(guān) 內(nèi)容。關(guān)于這個依然需要3個步驟：
1、function.php里寫入相應(yīng)的函數(shù)
function ajaxload(){
if( isset($_get['action'])){
if($_get['action'] == 'ajax_slidepage' ){
if($_get['page'] == 'pagenum2'){
echo '<ul>';
get_most_viewed('',8,0 ,0 ,' 次瀏覽');//這個相信都知道是什么吧……被瀏覽最多的文章
echo '</ul><p>';
}
else{
echo '<ul>';
get_archives('postbypost', 8);
echo '</ul><p>';
}
die;
}
}
}
addaction('init', 'ajaxload');
上面這段函數(shù)里，主要完成了兩件事：獲取action和page的值；顯示相應(yīng)的內(nèi)容。其中前一步驟即是本文重點–兩個（或多個）參數(shù)的輸出。如何確定這個參數(shù)呢？這就需要下面的步驟完成了：
2、js部分：
function ajaxslidepage(b,c) {
$.ajax({
url: 'http://127.0.0.1/?action=ajax_slidepage&page='+c,
type: 'get',
beforesend: function() {
var loading = '載入中';
$(b).empty().html(loading)
},
error: function(a) {
$(b).empty().html('載入失敗')
},
success: function(a) {
$(b).empty().html(a);
}
});
return false
};
注意這段語句中action=ajax_slidepage&page=’+c這一行，這就是步驟1中$_get［'action'］和$_get［'page'］的具體所指。
接著定義具體的點擊行為：
$('#slider4 .pager a.pagenum').click(function() {
$('#slider4 .pagenum').removeclass('active');
next = $(this).attr('rel');
next = -next*305;
$('#slider4 .overview').animate({'left':next});//點擊后的滑動效果
$(this).addclass('active');
var id = $(this).attr('id'); //獲取點擊的該pager的id
var show = id == 'pagenum2'?'#page2':'#page3'; //根據(jù)id查找下面對應(yīng)顯示的項目
if($(show).find('ul').length == 0){ //判斷，使僅載入一次
ajaxslidepage(show,id); //調(diào)用，在id=xx中顯示對應(yīng)內(nèi)容
}
event.preventdefault(); //阻止默認(rèn)行為（此處為鏈接點擊）
});
3、呼，下面是邊欄寫入的內(nèi)容：
（注意，這里集成了側(cè)欄的滑動pager效果，具體見ink主題的newcomments…部分）
<li id=slider4>
<ul class=pager>
<li><a href=# class=pagenum rel=0>newcomments</a></li>
<li><a href=# class=pagenum id=pagenum2 rel=1>hotposts</a></li>
<li><a href=# class=pagenum id=pagenum3 rel=2>newposts</a></li>
</ul>
<div class=viewport>
<ul class=overview style=width: 1500px; left: 0px; >
<li class=page>
<ul class=recentcomments>
我用的是最近評論，這個推薦
zww大叔的方法 http://zww.me/archives/24818
</ul>
</li>
<li class=page id=page2></li>
<li class=page id=page3></li>
</ul>
</div>
</li>
我目前用的css代碼也貼出來吧：
#slider4 { height： 1%; overflow:hidden; display： block; padding： 0 0 16px 0; margin： 0;}
#slider4 .viewport { width： 308px; border-left:1px solid #e3e3e3;border-right:1px solid #e3e3e3;border-bottom:4px solid #e3e3e3;background-color：#fff;height： 277px; overflow： hidden; position： relative; }
#slider4 .pager { overflow:hidden;border:1px solid #ddd; height： 1%; list-style： none; clear： both; margin:0; }
#slider4 .pager .micon{background-position： -147px -40px;margin-top:7px}
#slider4 #pagenum2 .micon{background-position：-72px -40px}
#slider4 #pagenum3 .micon{background-position：-48px -40px}
#slider4 .pager li { float： left; }
#slider4 .pagenum { background-color： #fff; text-decoration： none; text-align： center; padding： 5px; color： #555555; width:60px;line-height:35px;height:35px;text-indent：-9999px; font-weight： bold; display： block; }
#slider4 .active { color： #3e3e3e; background-color： #bbb;width:158px;text-indent:0; }
#slider4 .overview { list-style： none; position： absolute; width： 308px; left： 0;top： 0; }
#slider4 .overview .page{ float： left; height： 265px; width： 310px;line-height:23px}
#page2，#page3{padding-top:7px}
#slider4 .page ul li{padding:4px 6px 4px 12px;color：#9a9a9a;list-style:circle inside;}
其實主要的就是步驟1和2，這里用到的主要是ajax的get方法，當(dāng)然還有post方法，這個還沒搞清楚區(qū)別，留待以后分析。