对于技术这种东西，始终觉得现在用的很多以后都是会被摒弃的，死抱着一棵救命稻草终究会被湮没在历史的洪流之中。所以，某些技术只是拿来用用就可以了，内在始终不想去了解，大体上能完成功能即可。比如jquery，几次想看看书里怎么写又觉得没什么用处，偶尔到图书馆看到中外这类的书籍若干，拿起来又放下。终究是自己兴趣所在才有动力完成下去啊~
        最近有俩同学问题我边栏种马回事……我沉思了若干秒，总结出目前用的这个叫jquery的ajax方式异步获取（自己随便写的名字 – -|）的玩意。原型忘记是什么了，记得是 winy 那边的一个什么栗子……
       首先我来举个栗子……栗子栗子栗子，每周都吃栗子。
1、首先要有加载jquery库；
2、在自己要载入的js文件里写入：
function ajaxs() {
        $.ajax({
            url: 'http://127.0.0.1/?action=ajax', //域名换成你要用的
            type: 'get',
            beforeSend: function() {
                var loading = '<span class="loadsidebar"></span>';
                $('#hotposts').empty().html(loading)  //显示loading啊神马的
            },
            error: function(a) {
                $('#hotposts').hide().empty().html('<div style="text-apgn:center;padding-top:20px;">还木有载好</div>').fadeIn('fast')
            },   //错误时输出神马
            success: function(a) {
                $('#hotposts').empty().html(a) //成功时输出神马
            }
        });
        return false
};
ajaxs();
3、在function.php文件里写入：
function AjaxLoad(){
 
    if( isset($_GET['action'])){
        if($_GET['action'] == 'ajax'  ){
            echo 'Oh shit'; //你可以根据需要输出，比如输出最新评论，最新文章，最新妹子什么的
            die;
        }
        //if($_GET['action'] == 'ajax'  ){
            //如果理解的话，这样的代码还可以写出若干对吧？
    }
 
}
add_action('init', 'AjaxLoad');
顺利完成。
有了上面的模版，基本上要用到的功能都可以完成了，比如鼠标划过：$('#xxx').hover(function() {....}，比如点击某个地方：$('#ooo').cpck(function() {...}。把js部分中的最后一句话CP到这里面就完成鸟。具体见ink主题的边栏newcomments和Active Friends部分的效果。
 
很久没写过代码分享之类的东西了，面壁……
上一次的文章可能说的太含糊了，所以部分朋友提出了一些疑问（我太偷懒了），所以经过很很长时间的考虑，终于决定在今天写第二部分。相对于前一篇，本篇是威力加强版，增加的内容主要有：1、如何输入两个参数；2、提供完整的代码。欢迎继续观看。
上篇链接：ajax获取WordPress边栏信息（一）
jQuery官方给出的ajax的例子不再叙述，相信很多同学由于英语或者其他原因，看了也是有点不太明白肿么回事。我这里主要说说在WordPress里怎样通过它来控制侧边栏的异步获取和输出，就像前一篇所说的那样。还有某些朋友好奇的：目前的ink主题侧栏的点击某项目才调取相关内容。关于这个依然需要3个步骤：
1、function.php里写入相应的函数
function AjaxLoad(){
 if( isset($_GET['action'])){
            if($_GET['action'] == 'ajax_spdepage'  ){
                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');
上面这段函数里，主要完成了两件事：获取action和page的值；显示相应的内容。其中前一步骤即是本文重点–两个（或多个）参数的输出。如何确定这个参数呢？这就需要下面的步骤完成了：
2、js部分：
function ajaxspdepage(b,c) {
        $.ajax({
            url: 'http://127.0.0.1/?action=ajax_spdepage&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_spdepage&page=’+c这一行，这就是步骤1中$_GET［'action'］和$_GET［'page'］的具体所指。
接着定义具体的点击行为：
$('#spder4 .pager a.pagenum').cpck(function() {
        $('#spder4 .pagenum').removeClass('active');
        next = $(this).attr('rel');
        next = -next*305;
        $('#spder4 .overview').animate({'left':next});//点击后的滑动效果
        $(this).addClass('active');
        var id = $(this).attr('id'); //获取点击的该pager的id
        var show = id == 'pagenum2'?'#page2':'#page3'; //根据id查找下面对应显示的项目
        if($(show).find('ul').length == 0){ //判断，使仅载入一次
        ajaxspdepage(show,id); //调用，在id=xx中显示对应内容
        }
        event.preventDefault(); //阻止默认行为（此处为链接点击）
});
3、呼，下面是边栏写入的内容：
（注意，这里集成了侧栏的滑动pager效果，具体见ink主题的newcomments…部分）
<p id="spder4">
 <ul class="pager">
  <p><a href="#" class="pagenum" rel="0">NewComments</a></p>
  <p><a href="#" class="pagenum" id="pagenum2" rel="1">HotPosts</a></p>
  <p><a href="#" class="pagenum" id="pagenum3" rel="2">NewPosts</a></p>
 </ul>      
 <div class="viewport">
  <ul class="overview" style="width: 1500px; left: 0px; ">
   <p class="page">
    <ul class="recentcomments">
    我用的是最近评论，这个推荐
                                zww大叔的方法 http://zww.me/archives/24818
    </ul>
   </p>
   <p class="page" id="page2"></p>
   <p class="page" id="page3"></p>
  </ul>
 </div>
</p>
我目前用的css代码也贴出来吧：
#spder4 { height： 1%; overflow:hidden; display： block; padding： 0 0 16px 0; margin： 0;}
#spder4 .viewport { width： 308px; border-left:1px sopd #e3e3e3;border-right:1px sopd #e3e3e3;border-bottom:4px sopd #e3e3e3;background-color：#fff;height： 277px; overflow： hidden; position： relative; }
#spder4 .pager { overflow:hidden;border:1px sopd #ddd; height： 1%; pst-style： none; clear： both; margin:0; }
#spder4 .pager .micon{background-position： -147px -40px;margin-top:7px}
#spder4 #pagenum2 .micon{background-position：-72px -40px}
#spder4 #pagenum3 .micon{background-position：-48px -40px}
#spder4 .pager p { float： left; }
#spder4 .pagenum { background-color： #fff; text-decoration： none; text-apgn： center; padding： 5px; color： #555555; width:60px;pne-height:35px;height:35px;text-indent：-9999px; font-weight： bold; display： block; }
#spder4 .active { color： #3E3E3E; background-color： #BBB;width:158px;text-indent:0; }
#spder4 .overview { pst-style： none; position： absolute; width： 308px; left： 0;top： 0; }
#spder4 .overview .page{ float： left; height： 265px; width： 310px;pne-height:23px}
#page2，#page3{padding-top:7px}
#spder4 .page ul p{padding:4px 6px 4px 12px;color：#9a9a9a;pst-style:circle inside;}
其实主要的就是步骤1和2，这里用到的主要是ajax的get方法，当然还有post方法，这个还没搞清楚区别，留待以后分析。

TAG: ajax教程

评分：0