了解之后,你会发现WP中使用ajax是如此的简单,今天心情好,多写点文章~
简介
前端开发中,ajax是必不可少的,可以带来用户体验的提升。但是如果是使用WP,便觉得不知道如何下手了。比如要返回一些固定的数据(一般不更改),或者返回一些文章内容、标签、文章列表等等。下面做个简单的教程:
示例
一、侧边栏中ajax获取并刷新标签
1. 加载jquery:http://code.jquery.com/jquery-1.10.2.min.js
2. 编写请求并处理数据的函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 标签云ajax $(".tag_change").click(function(){ $.ajax({ //后台根据action返回相应数据 url: http://www.xuanfengge.com/?action=tag, type: 'get', beforeSend: function() { // 可以显示loading }, error: function(error) { // 错误处理 }, success: function(data) { // 成功返回数据,先清空初始标签,装载新数据淡入 $(".tag_content").empty().append($(data).fadeIn(200)); } }); return false; }); |
3. 在function.php文件里编写处理请求的函数
1 2 3 4 5 6 7 8 9 10 11 12 |
// 热门标签ajax部分,判断action,返回数据 function tagLoad(){ if( isset($_GET['action'])){ if($_GET['action'] == 'tag' ){ // 随机输出32条标签 echo wp_tag_cloud('smallest=10&largest=14&number=32&order=RAND'); die; } } } // 将函数连接到指定action(动作) add_action('init', 'tagLoad'); |
4. 获取数据
数据的获取一般是使用WP的API来返回,具体的可以翻阅资料。当然了也可以返回静态数据,在这里写静态数据,格式还是那么工整,如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function fav_save(){ if( isset($_GET['action'])){ if($_GET['action'] == 'fav_save' ){ ?> <!-- start --> <section id="fav_backup"> <h4 class="cf">安全备份</h4> <a class="fav_clear fav_btn" href="javascript:;">一键清空数据</a> <a class="fav_recover fav_btn" href="javascript:;">一键恢复数据</a> </section> <!-- end --> <?php die; } } } add_action('init', 'fav_save'); |
5. 处理多个参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
URL:http://www.xuanfengge.com/?action=ajax_slidepage&page=2 PHP: 获取action和page的值;显示相应的内容 function AjaxLoad(){ if( isset($_GET['action'])){ if($_GET['action'] == 'ajax_slidepage' ){ if($_GET['page'] == '2'){ 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'); |
二、获取文章分类页的下一页文章数据
分析:这个和上面的不太一样,这里只需要指定下一页的链接,点击时更新文章数据同时更新下一页链接就行
HTML:下一页文章链接、loading图标
1 2 3 4 |
<div class="load_more"> <?php next_posts_link( __( '加载更多', 'lee' ) ); ?> //链接地址 <em class="loading_icon"></em> //loading图标 </div> |
CSS:具体样式请查看轩枫阁分类页效果
JS:将返回的数据添加至页面,更新链接,同时也要防止在返回数据前的多次点击
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
//分类页ajax翻页 if(!$(".load_more a").length){ $(".load_more").remove(); //判断是否含有下一页 } //是否正在加载 var onloading = false; $("#wrapper").on("click",".load_more a",function() { if(onloading){ return false; }else{ $.ajax({ type: "get", url: $(this).attr("href"), beforeSend: function(xhr) { xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); $(".load_more").find("a").text("加载中..."); $(".load_more em").show(); onloading = true; }, error: function(request) { console.log(request.responseText); }, statusCode: { 404: function() { console.log("404"); } }, success: function(data) { //获取文章所在的DOM及下一页链接 var result = $(data).find("#main .article"); var nextHref = $(data).find(".load_more a").attr("href"); // 渐显新内容 $(".load_more").before(result.fadeIn(400)); $(".load_more em").hide(); $(".load_more").find("a").text("加载更多"); if (nextHref != undefined) { $(".load_more a").attr("href", nextHref); } else { // 若没有链接,即为最后一页,则移除导航 $(".load_more").remove(); } onloading = false; } }); } return false; }); // 给浏览器窗口绑定 scroll 事件 $(window).on("scroll",function() { var windowH = $(window).height(); var documentH = $(document).height(); // 判断窗口的滚动条是否接近页面底部 if ($(document).scrollTop() + windowH > documentH - 100) { if(onloading){ return false; }else{ //滚动到页面底部时,自动触发点击下一页 $(".load_more a").click(); } } }); |
总结
使用ajax,能提升用户体验,但是也会给SEO带来影响,因为搜索引擎的爬虫爬取不到下一页甚至更多页的内容。但还是有方法解决的,比如直接在首页添加网站地图,使用SEO插件等等。
当初看到这电视剧的时候并不是特别想看,后来去看了下预
学习了
学习了
希望有所帮助,回头看之前写过的文章,文风不好,略感无聊。。下次改改