Ajax分页调用

因为不成熟,实现Ajax调用数据有点繁琐,需要仔细阅读。

准备工作:网站信息必须开始API验证串


第一步:数据调用中心创建一个列表调用(注意,请开启远程调用功能

blob

第二步:编写第一页的调用代码

<!-- php:$list = phpok('news','fields=id&psize=2') -->
<ul class="artlist" id="article-test">
    <!-- loop from=$list.rslist key=$key value=$value -->
    <li><a href="{$value.url}" title="{$value.title}">{func phpok_cut $value.title 15 …}</a></li>
    <!-- /loop -->
</ul>
<input type="button" value="第1页" onclick="page_remote(1)" />
<input type="button" value="第2页" onclick="page_remote(2)" />
<input type="button" value="第3页" onclick="page_remote(3)" />

第三步:生成第二页的链接代码

<!-- php:$link = phpok_call_api_url('news','fields=id&psize=2') --> 生成要请求的链接

第四步:编写JS

<script type="text/javascript">
function page_remote(pageid)
{
	var psize = 2;
	var link = "{$link}";
	if(!pageid || pageid == 'undefined' || parseInt(pageid) <1){
		pageid = 1;
	}
	var offset = parseInt((pageid - 1) * psize);
	link += "&ext[offset]="+offset.toString();
	$.phpok.json(link,function(data){
		if(data.status == 'ok'){
			var lst = data.content.rslist;
			var html = '';
			for(var i in lst){
				html += '<li><a href="'+lst[i].url+'">'+lst[i].title+'</a></li>';
			}
			$("#artlist-test").html(html);
		}
	})
}
</script>

全程效果如下:

blob

blob  

blob

没有找到答案?

您可以通过留言获取更多帮助。也可以通过社区提交相关问题。

留言 开发者社区
论坛咨询