Ajax分页调用
因为不成熟,实现Ajax调用数据有点繁琐,需要仔细阅读。
准备工作:网站信息必须开始API验证串
第一步:数据调用中心创建一个列表调用(注意,请开启远程调用功能)
第二步:编写第一页的调用代码
- <!-- 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>
全程效果如下: