0%

WP 主题中添加 AJAX 响应

为 Wordpress Theme 添加可在匿名(未登录)情况下访问的 AJAX 响应,网上资料很凌乱,遂自行记录过程如下。 1. 首先确保主题中有 jQuery 库(似乎这已是各小型网站的标配),没有的话可以在主题 header.php 文件中添加:

2. 然后需要在页面中插入当前网站的 URL 信息,这个信息可以通过如下代码:

admin_url( ‘admin-ajax.php’ ) ) ); ?>

如此一来系统将自动在页面中返回 admin-ajax.php 的网络路径了:

/* <![CDATA[ /
var MyAjax = {
uri : “http://example.com/wordpress/wp-admin/admin-ajax.php"
};
/\
]]> */

于是在将来自己写的 JS 代码中,只需要调用 MyAjax.uri 就能获取到 admin-ajax.php 文件的地址了; 3. 在 function.php 中添加准备用来响应 ajax 请求的 function:

‘success’);
if(!$data) $arr[‘status’] = ‘fail’;
//在数据中插入先前发送过来的参数 data
$arr[‘data’] = $data; //实际上这一步是扯淡的,正确的做法当然是处理这个请求了
/* 然后你开始根据接收到的参数做一些 php 该做的事情 */
$response = json_encode($arr); //将上面各步骤生成的数据转换为 JSON 格式
header( “Content-Type: application/json” ); //发送 Header,确定数据包为 JSON 格式
echo $response; //生成数据
exit; //这一步一定要加,要不然 $response 会始终返回 0,有些说法是返回 die(),不过我不太喜欢这个方法名,所以还是 exit 吧
}
?>

4. 然后开始添加 JS 代码,发送 AJAX 请求,这个放在主题的相应 js 文件里面就行了:

var uri = MyAjax.uri, param = {
action : ‘update_stock’,
data : {} //这里的 data 可以自己添加任何东西,下面除了 data 外也可以添加别的内容
}, ;
//开始发送请求
$.post(uri, param, function(data){
//ajax 返回数据成功后的操作,下面的意思是你可以在 firebug 的 console 里面看见返回的数据,当然也可以进行其他的操作
console.log(data);
}, ‘json’);

code on Gist 部署完毕,更多内容请参见官方文档