本来伪极客对于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' />