zblog如何使用ajax异步无刷新加载数据?
Admin 4872 1
有时候我们需要给网站中的某个元素实现局部刷新的时候就需要用到ajax请求,听起来复杂其实看看手册操作起来也不难;
具体怎么实现的我们可以参考以下代码:
<script>
function ZBB_GetData(id){
$.ajax({
type: 'post', //使用post请求
async: true, //异步加载
cache: false, //禁用缓存
url: ajaxurl + id, // 请求url地址,这里我们可以自己用zblog js中的ajaxurl地址;
dataType: 'json', // 返回数据类型
success: function(data){
if (data.code == 1) {
$('#' + id).html(data.data); //将获得的数据使用jq插入到指定的html元素中
}
},
error: function(data){
}
});
};
</script>而后端PHP代码我们可以在主题或插件中挂载zblog的 Filter_Plugin_Cmd_Ajax 接口;当然也可以自建PHP文件接收请求信息。
Add_Filter_Plugin('Filter_Plugin_Cmd_Ajax', 'zbblog_Cmd_Ajax');
function zbblog_Cmd_Ajax($src)
{
global $zbp;
if($src=='id') { //ajax传过来的id值
// 比如随机获取10个标签;
$res = '';
$w[] = array('<>', 'tag_Count', 0);
if (mt_rand(0, 1)) {
$o = array('tag_Count' => 'DESC');
} else {
$o = array('tag_Count' => 'ASC');
}
$sql = $zbp->db->sql->Select($zbp->table['Tag'], '*', $w, $o, array(500));
$tags = $zbp->GetListType('Tag', $sql);
shuffle($tags);
$tags = count($tags) > 10 ? array_chunk($tags, 10)[0] : $tags;
foreach ($tags as $tag) {
$res .= '<li><a href="' . $tag->Url . '" target="_blank">' . $tag->Name . '</a></li>';
}
echo json_encode(array('code' => 1, 'data' => $res));
}
}数据请求成功后,我们就可以在js中继续操作,从而达到无刷新页面加载数据。