使用WORDPRESS自带AJAX方法

简介:

例如给网站每页logo后面的一句名言,点击“换一条”就会ajax动态加载一条,使用了wordpress的自带ajax方法。下面介绍如何使用wordpress自带ajax方法:

1.在header.php文件加入html和js

html:

<span id="random"><i id="say"><?php echo random_str();?></i> [<a href="javascript:void();" onclick="say();" rel="nofollow">换一条</a>]</span>

 

js ajax请求:

复制代码
<?php $admin_url=admin_url( 'admin-ajax.php' );?>
<script type="text/javascript">
function say(){
    jQuery(document).ready(function($){
        var data={
            action:'say'
        }
        $.post("<?php echo $admin_url;?>", data, function(response) {
            $("#say").text(response);
        });
    });
}
</script>
复制代码

在wordpress中ajax请求的url地址是统一的,用$admin_url=admin_url( ‘admin-ajax.php’ )获取。

 

2.在主题的function.php中写接收请求处理函数

复制代码
function say(){
    echo random_str();
    die();
}
add_action('wp_ajax_say', 'say');
add_action('wp_ajax_nopriv_say', 'say');
复制代码

 

重点是这两个钩子函数,wp_ajax_say第一个参数是wp_ajax_函数名称,wp_ajax_nopriv_say表示没有登录的用户的处理函数,这里对有没有登录的用户都是一样的,所以都写上。

就这样,就已经实现了ajax的功能,是不是很方便,但是wordpress的ajax请求感觉好慢啊!!!

最后附上随机输出名言的函数:

复制代码
function random_str() {  
$poems=array( '三人行,必有我师焉。择其善者而从之,其不善者而改之。——孔子', '成为卓越的代名词,很多人并不需要杰出素质的环境。——Steve Jobs', '活着就是为了改变世界,难道还有其他原因吗?——Steve Jobs', 'Follow yourself.(追随你的内心)——Steve Jobs', '生活是不公平的;要去适应它。——比尔盖茨', '走自己的路,让别人说去吧。——但丁', '成功并不是一条直线,而是一条蜿蜒曲折的线。', '让你难过的事情,有一天,你一定会笑着说出来。 ——《肖申克的救赎》', '如果额头终将刻上邹纹,你只能做到邹纹不要刻在你心上。——中国合伙人', '梦想是什么,梦想就是一种让你感到坚持就是幸福的东西。——中国合伙人', '记住你即将死去——乔布斯', '当你快乐时,你要想,这快乐不是永恒的。当你痛苦时你要想这痛苦也不是永恒的。', '古人云:尽人事,听天命。', '如果人生能像svn一样能恢复到以前任何一个版本该多好啊', 'Stay Hungry, Stay Foolish', '做你喜欢的事情不会觉得累', '今天很残酷,明天更残酷,后天会很美好,但绝大多数人都死在明天晚上——马云', '天才就是百分之九十九的努力加上百分之一的灵感,但是没有那百分之一的灵感万万不行 ——爱迪生', '不要被教条束缚,那意味着你和别人一样思考,不要被他人的观点掩盖你真正的想法,听从你的直觉和心灵的指示。——Steve Jobs', 'The clock hand can return to the original point, but it is not that of yesterday. ', ); return $poems[rand(0,count($poems)-1)]; }
复制代码



本文转自黄聪博客园博客,原文链接:http://www.cnblogs.com/huangcong/p/4773366.html,如需转载请自行联系原作者
相关文章
|
21天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
18 0
|
7月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
37 0
|
2月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
2月前
|
移动开发 前端开发 安全
Ajax跨域的所有方法(最详细带使用教程!!!)
Ajax跨域的所有方法(最详细带使用教程!!!)
|
3月前
|
数据采集 Web App开发 前端开发
Python爬虫之Ajax分析方法与结果提取#6
Ajax分析方法、Ajax结果提取【2月更文挑战第20天】
38 0
Python爬虫之Ajax分析方法与结果提取#6
|
3月前
|
XML 前端开发 JavaScript
AJAX get() 和 post() 方法
AJAX(Asynchronous JavaScript and XML)是一种用于创建快速和动态网页的技术,它允许使用 JavaScript 和 XMLHttpRequest 对象在不重新加载整个页面的情况下向服务器发送请求和接收响应。jQuery 提供了几个用于 AJAX 操作的方法,包括 .ajax()、.get() 和 .post()
15 1
|
4月前
|
前端开发 JavaScript
|
4月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
30 0
|
4月前
|
XML JSON 前端开发
AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法
AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法
39 0
|
9月前
|
XML JSON 缓存
JQuery中$.ajax()方法参数详解
JQuery中$.ajax()方法参数详解
42 2