本来伪极客对于Ajax加载没什么感觉,也没打算用这个处理。前两天MCBBC跟我提起Ajax这个问题,于是我也就扒拉扒拉网上教程,谁知道不看不要紧,一看就入了坑。3天时间,反反复复折腾了N多版本代码,就是不成功,以我的个性,不弄好誓不罢休的。功夫不负伪极客啊,终于在前一秒钟,被我试验成功了。

有人鼓掌么?算了,其实也没什么可炫耀的,因为都是前辈的代码了,来回折腾已经记不清从谁哪里看的了。欢迎各界大神前来认领,在此表示感谢!

以我的经验来说,本身对代码不了解的话,还是不说关于太多代码的东西吧,也避免把跟我一样的菜鸟绕晕。以下直接你拿去用,然后只用修改特定位置内容即可,所以我称之为傻瓜教程。有问题请踊跃留言反馈!

首先在你的所有调用到

函数的页面,分别在每个函数前后插入判断,效果如下

/*不必疑惑,miss和ajax你可以在下文中自定义,只要这里和那里一一对应即可*/

其他两个函数照同样处理。

然后在你自定义js文件里添加以下代码,比如我的是custom.js。 /* *创建两个全局变量 **/ var ajaxBinded = false; $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');

/* *开始jQuery执行 **/ jQuery(document).ready(function() {

if( history && history.pushState){    //html5的历史记录API
   
   //为真就执行下列函数
    Ajaxopt();
    add_loading();
    
}

});

/* *创建Ajaxopt函数 **/ function Ajaxopt(){

$(document).on(\'click\',\'a\',function(event){   //为所有不为新窗口打开的链接添加单击事件,jQuery版本低于1.7的请吧.on更换为.live
    var link = event.currentTarget;
    var url = link.href;
    if ( event.which > 1 || event.metaKey || event.ctrlKey )
    return;
    if ( location.protocol !== link.protocol || location.host !== link.host ){
        return;
    }
    if (link.hash && link.href.replace(link.hash, \'\') === location.href.replace(location.hash, \'\'))
    return;
    if (url.indexOf(\"respond\")>0||url.indexOf(\"/wp-admin/\")>0||url.indexOf(\"wp-login.php\")>0||url.indexOf(\"sitemap.xml\")>0)
    return;
    if(url.search(/\\.(jpe?g|png|gif)\\b/i) != -1) return;    //链接含有图片格式后缀名的,不做Ajax请求,用回默认的请求。
    //以上条件语句均为判断什么时候需要ajax加载
    //下面为执行loadDate函数进行ajax操作。
    loadData(url,\'\',true);
    event.preventDefault();
});

/* *搜索框ajax处理 **/ $('.search_form').on('submit', function(event){ //类名称根据你的搜索框修改,submit一般不需要修改。 var url = $(this).attr('action'); var data = $(this).serialize(); var keyword = $('.search_text').val(); //类名称根据你的搜索框修改,这里是文字框的类。 if(keyword){ //输入了东西的话
loadData(url, data, true); } event.preventDefault(); });

} /* *ajax加载动画 **/ function add_loading(){ if($('#article_loading').length == "0"){ //选区的ID要和下面自定义的DIV的id一样 var div = "<div id='article_loading' style='position:fixed; z-index:100000; _position:absolute; top:45%; left:45%; display:none'><img src='" + location.protocol+'//'+location.host + "/wp-content/themes/geekv/images/loading.gif' />