轩枫阁

首页 / Web前端 / 授人以渔 / JQuery / WP Ajax异步刷新 – wordpress中通过ajax获取信息

WP Ajax异步刷新 – wordpress中通过ajax获取信息

了解之后,你会发现WP中使用ajax是如此的简单,今天心情好,多写点文章~

简介

前端开发中,ajax是必不可少的,可以带来用户体验的提升。但是如果是使用WP,便觉得不知道如何下手了。比如要返回一些固定的数据(一般不更改),或者返回一些文章内容、标签、文章列表等等。下面做个简单的教程:

示例

一、侧边栏中ajax获取并刷新标签

1. 加载jquery:http://code.jquery.com/jquery-1.10.2.min.js

2. 编写请求并处理数据的函数

3. 在function.php文件里编写处理请求的函数

4. 获取数据

数据的获取一般是使用WP的API来返回,具体的可以翻阅资料。当然了也可以返回静态数据,在这里写静态数据,格式还是那么工整,如:

5. 处理多个参数

 

二、获取文章分类页的下一页文章数据

分析:这个和上面的不太一样,这里只需要指定下一页的链接,点击时更新文章数据同时更新下一页链接就行

HTML:下一页文章链接、loading图标

CSS:具体样式请查看轩枫阁分类页效果

JS:将返回的数据添加至页面,更新链接,同时也要防止在返回数据前的多次点击

 总结

使用ajax,能提升用户体验,但是也会给SEO带来影响,因为搜索引擎的爬虫爬取不到下一页甚至更多页的内容。但还是有方法解决的,比如直接在首页添加网站地图,使用SEO插件等等。

283/470
285/470

相关阅读

文章评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子