当前位置: 秋叶网络博客
Html字符串筛选提取指定节点
作者: 秋叶 发表时间:2017年03月17日
mysql数据库迁移导入到mongodb详细教程
和class都可拿到该节点里面的所有html,再插到页面中,这就是全站ajax的精华。 function getNode(node,html){ var type=node.charAt(0);//获取类型,支持 #id、.class和tag三种类型; var selector,data,regExp; if(type=="#"){ selector=node.substring(1); regExp=new RegExp('<[a-zA-Z]+[^>]+id=\"\\s*' + selector + '\\s*\"[^>]*>',"gi"); }else if(type=="."){ selector=node.substring(1); regExp=new RegExp('&...
目录: 前端编程 标签: 字符串提取节点 1条评论 9504次阅读
全站ajax技术实现的通用方法
作者: 秋叶 发表时间:2014年09月20日
mysql数据库迁移导入到mongodb详细教程
其实ajax全站无刷新效果我很久之前就在我的网站动过手术,总希望能实现该功能,网上找了许多方法,要哪样哪样不行,折腾来折腾去还是没成功,不是有这个bug就是有那个bug。再加上我网站的代码也不是很规范,因为网上的代码很多都不靠谱,很多js是直接出错的。最后特意装了个插件,用它是不可能的,只想把它的核心代码扒过来,可没想到的是,插件也用不了的,勉强可以实现ajax加载,可是加载后把我的一些源代码暴漏出来了。因为对js不熟悉,找来找去也找不到原因,再后来直接就放弃了。 今天随意逛了下博客,发现inlojv也分享了一段js代码,于是抱着试试的态度试了下,神奇地发现居然可行,果断用上这高大上的功能。其实这是从插件上得来的一段代码,既然我的都行,那这方法应该适合大部分主题的,现在把它分享给大家: 以下是程序代码 //定义所需变量 var ajaxhome='www.mizuiren.com'; // 填入主页地址 var ajaxcontent = 'content'; // 为Ajax加载部分的id,一般的主题主体都是content var ajaxsearch_class = 'searchform'; // 搜索表单的class,同样,一般都是类似于searchform这种的 var ajaxignore_string = new String('#, /wp-, .pdf, .zip, .rar, /goto'); // 不需要Ajax加载的链接格式 var ajaxignore = ajaxignore_string.split(', ');// 字符分割 var ajaxloading_code = 'loading'; // 加载动画 var ajaxloading_error_code = 'error'; // 加载失败动画 var ajaxreloadDocumentReady = false; //重新加载 var ajaxtrack_analytics = false var ajaxscroll_top = true // 定位返回锚点 var ajaxisLoad = false; // ajax加载开关 var ajaxstarted = false; // ajax开始确认 var ajaxsearchPath = null; // 搜索路径 // 初始化载入 $(document).ready(function() { ajaxloadPageInit(""); }); // 函数:搜索提交 function submitSearch(param){ if (!ajaxisLoad){ ajaxloadPage(ajaxsearchPath, 1, param); } } // 函数:过滤链接 function ajaxcheck_ignore(url) { for (var i in ajaxignore) { if (url.indexOf(ajaxignore[i]) >= 0) { return false; } } return true; } // 函数:需要重新加载的js,比如灯箱、代码高亮等 function ajaxreload_code() { //add code here } // 函数:导航菜单高亮切换 function ajaxclick_code(thiss) { $('ul.nav-menu li').each(function() { // 设置成你的菜单列表li $(this).removeClass('current-menu-item'); }); $(thiss).parents('li').addClass('current-menu-item'); } // 核心函数:ajax加载 function ajaxloadPage(url, push, getData){ if (!ajaxisLoad){ if (ajaxscroll_top == true) { // 返回顶部 $('html,body').animate({scrollTop: 0}, 500); // 返回位置和速度 } ajaxisLoad = true; // 开启 ajaxstarted = true; // 开始 nohttp = url.replace("http://","").replace("https://",""); // 去除https或http firstsla = nohttp.indexOf("/"); // 是否存在 / 符号 pathpos = url.indexOf(nohttp); // 是否存在完整链接 path = url.substring(pathpos + firstsla); // 切割提取字符串 if (push != 1) { if (typeof window.history.pushState == "function") { // 浏览器地址变更 var stateObj = { foo: 1000 + Math.random()*1001 }; history.pushState(stateObj, "ajax page loaded...", path); } else { } } if (!$('#' + ajaxcontent)) { } $('#' + ajaxcontent).append(ajaxloading_code); // 加载动画 $('#' + ajaxcontent).fadeTo("slow", 0.4,function() { // 淡出效果 $('#' + ajaxcontent).fadeIn("slow", function() { // 淡入效果 $.ajax({ type: "GET", url: url, data: getData, cache: true, dataType: "html", success: function(data) { // 加载成功后 ajaxisLoad = false; // 关闭ajax datax = data.split(''); titlesx = data.split(''); if (datax.length == 2 || titlesx.length == 2) { // 浏览器标题变更 data = data.split('')[1]; titles = data.split('')[0]; $(document).attr('title', ($(" ").html(titles).text())); } else { } if (ajaxtrack_analytics == true) { if(typeof _gaq != "undefined") { if (typeof getData == "undefined") { getData = ""; } else { getData = "?" + getData; } _gaq.push(['_trackPageview', path + getData]); } } data = data.split('id="' + ajaxcontent + '"')[1]; data = data.substring(data.indexOf('>') + 1); var depth = 1; var output = ''; while(depth > 0) { temp = data.split('')[0]; i = 0; pos = temp.indexOf(" <div"); while (pos != -1) { i++; pos = temp.indexOf("<div", pos + 1); } depth=depth+i-1; output=output+data.split('')[0] + ''; //分割字符串 data = data.substring(data.indexOf('') + 6); } document.getElementById(ajaxcontent).innerHTML = output; $('#' + ajaxcontent).css("position", "absolute"); $('#' + ajaxcontent).css("left", "20000px"); $('#' + ajaxcontent).show(); ajaxloadPageInit("#" + ajaxcontent + " "); if (ajaxreloadDocumentReady == true) { $(document).trigger("ready"); } try { ajaxreload_code(); } catch(err) { } $('#' + ajaxcontent).hide(); $('#' + ajaxcontent).css("position", ""); $('#' + ajaxcontent).css("left", ""); $('#' + ajaxcontent).fadeTo("slow", 1, function() {}); }, error: function(jqXHR, textStatus, errorThrown) { // 加载错误时提示 ajaxisLoad = false; document.title = "Error loading requested page!"; document.getElementById(ajaxcontent).innerHTML = ajaxloading_error_code; } }); }); }); } } // 后退时页面效果,用popstate window.onpopstate = function(event) { if (ajaxstarted === true && ajaxcheck_ignore(document.location.toString()) == true) { ajaxloadPage(document.location.toString(),1); } }; //函数: ajax加载 function ajaxloadPageInit(scope){ $(scope + "a").click(function(event){ // 点击事件绑定a标签 if (this.href.indexOf(ajaxhome) >= 0 && ajaxcheck_ignore(this.href) == true){ event.preventDefault(); this.blur(); var caption = this.title || this.name || ""; var group = this.rel || false; try { ajaxclick_code(this); } catch(err) { } ajaxloadPage(this.href); // 核心函数 } }); $('.' + ajaxsearch_class).each(function(index) { // 搜索ajax if ($(this).attr("action")) { ajaxsearchPath = $(this).attr("action");; $(this).submit(function() { submitSearch($(this).serialize()); return false; }); } }); if ($('.' + ajaxsearch_class).attr("action")) {} else { } } 提示:可以先修改部分代码再运行 把这段代码加入到自己主题的js文件中,如果你的主题文章容器是content的话,加入后可以直接使用,无需修改任何代码(首页地址还是要改的~),如果确要修改,核心代码后面都有注释,修改起来易如反掌。 以上是第一种方法,据一些人测试,很多主题可以实现ajax效果,但是加载不出来内容,现在分享第二种方法,据说兼容性更好,亲测几个主题都可以。如果你用第一段代码出问题,不妨试试以下这段卢哥主题的代码: jQuery(document).ready(function($){ var ajx_main = '#blogitem' , // 要替换的主体id,改为你文章部分的容器 ajx_a = 'a' , // a标签,自己添加排除规则 ajx_comt = 'comments' , // 整个评论区的id ,不加# ajx_submit_form = '#comment_form' , // 提交按钮所在的表单 ajx_comtlist = '.comment-list' , // 评论列表id或class ajx_comtpagenav = '.pagenav' , // 评论分页导航的id或class ajx_comtpagenav_a = '.pagenav a' , // 评论分页导航的a标签 ajx_sform = '.inlo-search form' , // 搜索表单form标签 ajx_skey = '.s-key' ; // 搜索表单input标签内的id或class function reload_func(){ // 这里放置需要重载的JS或函数 } $(function() { a(); //pushState初始化执行一次 }); // 建立锚点函数,用于跳转后的滚动定位,使用这个主要是有侧栏评论带#号时能在请求后定位到该条评论的位置 function body_am(id) { id = isNaN(id) ? $('#' + id).offset().top : id; $("body,html").animate({ scrollTop: id }, 0); return false; } function to_am(url) { var anchor = location.hash.indexOf('#'); // 用indexOf检查location.href中是否含有'#'号,如果没有则返回值为-1 anchor = window.location.hash.substring(anchor + 1); body_am(anchor); } // 主页地址,用于下面的提交函数 var home_url = document.location.href.match(/http:\/\/([^\/]+)\//i)[0]; // 函数: 替换url,用于评论ajax提交 function replaceUrl(url, domain) { return url.replace(/http:\/\/([^\/]+)\//i, domain); } // 函数:从封装的Json获取 function getFormJson(frm) { var o = {}; var a = $(frm).serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; } // 函数:更新浏览器历史缓存(用于浏览器后退) function l(){ history.replaceState( // 刷新历史点保存的数据,给state填入正确的内容 { url: window.document.location.href, title: window.document.title, html: $(document).find(ajx_main).html(), // 抓取主体部分outerHTML用于呈现新的主体。也可以用这句 html: $(ajx_main).prop('outerHTML'), }, window.document.title, document.location.href); } // 函数:页面载入初始一次,解决Chrome浏览器初始载入时产生ajax效果的问题,并且监听前进后退事件 function a(){ window.addEventListener( 'popstate', function( e ){ //监听浏览器后退事件 if( e.state ){ document.title = e.state.title; $(ajx_main).html( e.state.html ); //也可以用replaceWith ,最后这个html就是上面替换State后里面的html值 // 重载js window.load = reload_func(); // 重载函数 } }); } //函数:AJAX核心 function ajax(reqUrl, msg, method, data) { if (msg == 'pagelink' || msg == 'search') { // 页面、搜索 $(ajx_main).fadeTo('slow',0.6); } else if ( msg == 'comment' ){ // 评论提交 $('#' + ajx_comt).fadeTo('slow',0.5); } else if ( msg == 'comtpagenav' ){ // 评论分页时 $(ajx_comtlist).fadeTo('slow',0.5); $(ajx_comtpagenav).fadeTo('slow',0.8); } $.ajax({ url: reqUrl, type: method, data: data, beforeSend : function () { //加载前操作 这个必须放在window.history.pushState()之前,否则会出现逻辑错误。 l(); //刷新历史点内容,这个必须放在window.history.pushState()之前,否则会出现逻辑错误。 }, success: function(data) { if (msg == 'pagelink' || msg == 'search') { // 又如果msg为 页面 或 搜索—— 【1】 $(ajx_main).html($(data).find(ajx_main).html()) ; // 替换原#main的内容 $(ajx_main).fadeTo('normal',1); } else if (msg == 'comment') { // 又如果msg为 评论回复——————————【2】 $('#' + ajx_comt).html($(data).find('#' + ajx_comt).html());// 评论列表滑出 $('#' + ajx_comt).fadeTo('normal',1); $("body,html").animate({scrollTop:$('#'+ajx_comt).offset().top}, 900); // 定位返回评论ID顶部 } else if (msg == 'comtpagenav') { // 又如果msg为 评论分页——【3】 var content = $(data).find(ajx_main).html(); var pagedstring = $(data).find(ajx_comtpagenav).html(); $(ajx_main).html(content); $(ajx_comtpagenav).html(pagedstring); $(ajx_comtlist).fadeTo('normal',1); // 评论列表显示 $(ajx_comtpagenav).fadeTo('normal',1); // 评论分页显示 $("body,html").animate({scrollTop:$(ajx_comtlist).offset().top}, 600); } document.title = $(data).filter("title").text(); // 浏览器标题变更 if (msg != 'comment') { // —— 不为后退 也 不为评论回复时 var state = { // 设置state参数 url: reqUrl, title: $(data).filter("title").text(), html: $(data).find(ajx_main).html(), }; // 将当前url和历史url添加到浏览器当中,用于后退。里面三个值分别是: state, title, url window.history.pushState(state, $(data).filter("title").text(), reqUrl); } }, complete: function() { // ajax完成后加载 // 代码重载区 if (msg == 'pagelink') { // 若msg为 页面链接 to_am(reqUrl) ;// 定位到相应链接位置,这个必须放在window.history...之后执行,否则遇到带#号的链接,再点击其他链接地址栏就无法改变 } window.load = reload_func(); // 重载函数 }, timeout: 5000, // 超时长度 error: function(request) { // 错误时的处理 if (msg == msg == 'pagelink' || msg == 'search'){ location.href = reqUrl; //直接刷新跳转到请求的页面链接 } else if (msg == 'comment') { // 若msg为评论回复 alert($(request.responseText).filter("p").text()); // 弹出警告,这个是必需的,如果删除那么提交错误时就会打开空白页面 $('#' + ajx_comt).fadeTo('normal',1); } else if ( msg == 'comtpagenav' ) { $(ajx_comtlist).fadeTo('normal',1); // 警告后评论区显示 $(ajx_comtpagenav).fadeTo('normal',1); // 警告后评论区显示 } else { location.href = reqUrl; //页面错误时跳转到请求的页面 } }, }); } //页面ajax $('body').on("click",ajx_a, function() { ajax($(this).attr("href"), 'pagelink'); return false; }); //评论ajax $('body').on('submit',ajx_submit_form, function() { ajax(replaceUrl(this.action, home_url), 'comment', 'POST', getFormJson(this)); return false; }); //搜索ajax $('body').on('submit',ajx_sform, function() { ajax(this.action + '?s=' + $(this).find(ajx_skey).val(), 'search'); return false; }); //评论分页ajax $('body').on("click",ajx_comtpagenav_a, function() { ajax($(this).attr("href"), 'comtpagenav'); return false; }); }); 确保你的主题已经加载了jQuery,否则也是不行的。...
目录: 网络技术 标签: ajax,全站无刷新 30条评论 20069次阅读
使用JS改造的简单网页音乐播放器,仿QQ空间样式
作者: 秋叶 发表时间:2014年03月30日
mysql数据库迁移导入到mongodb详细教程
,将以失败告终。所以一直想写个教程。 还有就是计划博客采用全站ajax的,后来发现这东西不好整,尤其对于我的主题,网上的方法几乎实现不了,想装个插件扒效果下来也出错,无奈,先搁置一阵子再说,如果成功后将公布分享给大家。不太赞成那些把一点小技术都藏藏掩掩的人。 好了,前言到此结束。进入正题,为了从简单做起,给自己的博客首马当先加了个简洁网页mp3播放器,首先说一下它的优点:代码不多,仅仅几行调用代码外加一个16kb...
目录: 网络技术 标签: 简洁mp3播放器,网页音乐播放器,js播放器 16条评论 21841次阅读

登 录
点击获取验证码
还没账号?点击这里