php+ajax+JSON API实现单页面内标签切换

萧邦 — Tue, 25 Jul 2017 09:27:55 +0000

公司制作新公司的官网，采用wordpress来进行站点搭建。其中首页的案例展示模块，设计如下图：

如上图，需要在首页进行案例的切换。

实现功能想到有两种解决方案：
方案一：除index.php文件外，创建三个分类文件category-h5.php、category-media.php、category-design.php，点击标签，跳转到对应的分类页面。基本可以实现标签分页功能。更加精细点，可以缓存当前页面位置，在新的页面设置页面滚动至缓存位置。本方案基本可以实现功能。唯一缺点：页面过渡时根据网络情况会出现闪烁、多3个php文件。

方案二：单页面index.php，安装JSON API的插件，采用ajax的形式，动态获取分类内容，并动态更新页面内容。

当前采用方案二进行技术实现。

1、在wordpress 管理后台创建分类标签，如下图：

2、安装JSON API插件并启用

3、添加分类文章，测试JSON API


var clickedItem = 0;
var $items = $('#categoryMenu').find('a');
var slugList = ['case', 'h5', 'media', 'design'];
function clickItem(index) {
     /*更新按钮选项的状态*/
     $($items[clickedItem]).removeClass('hover');
     $($items[index]).addClass('hover');
     clickedItem = index;

     /*请求API，获取分类的内容*/
     var url = '/yanrui/?json=get_category_posts&slug=' + slugList[index] +'&count=6';
     $.ajax({
         type: "GET",
         url: url,
         dataType: "json",
         jsonp: "callback",
         success: function (data) {
             console.log(data);
             var res = eval(data);
             if (res.status == 'ok') {
                  // todo 解析文章内容
             }
         },
         error:function(msg){
             msg = eval('(msg)');
             console.log(msg);
         }
     });
}

测试结果如下图，即正常接口测试通过：

4、ajax获取结果，动态更新模块内容

5、完成单页面动态切换。

ajax – 萧邦的博客

php+ajax+JSON API实现单页面内标签切换