各位大侠,可否学习下你们的Ajax请求的信息流加载案例、Ajax请求的分页案例?

未结贴
12 228
我对JS不是特别懂,我硬是弄了好几天仍没弄明白,只得再次来咨询了,各位大侠别笑我哈。
我把所有的 http://fly.layui.com/case/2017/、http://fly.layui.com/case/2016/ 案例都看了,没有一个做成这种用Ajax请求的信息流的。
官方给的示例 http://www.layui.com/doc/modules/flow.html 没有具体Ajax实例,
我因此想知道,示例中的“ /api/list?page=” 这个请求文件的JOSN格式是什么样的。

各位大侠,你们手头有现成的Ajax请求的信息流加载案例、Ajax请求的分页案例吗?
分享给我学习下啊!
  • ✿巭涛 ✿巭涛
    7天前
    @Absolutely
    非常感谢,用官方默认的信息流代码套进去,居然可以使用了。
    原来就是原来后台返回是字符串的问题。

    我用的是PHP,只要在PHP代码开始处加一行 header('Content-type:text/json'); 就OK了。

    如果没有兄弟指点,我可能会一直都纠结如此,再次感谢。
    1 回复
  • ✿巭涛 ✿巭涛
    8天前
    下面是我的写法,一直不对,还望高手们赐教:

    我的前端页面是这样写的:
     <ul class="flow-default" style="height: 300px;" id="clist">
    <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li>
    </ul>
    <script>
    layui.use('flow', function(){
    var flow = layui.flow;
    flow.load({
    elem: '#clist' //指定列表容器
    ,done: function(page, next){ //到达临界点(默认滚动触发),触发下一页
    var lis = [];
    $.get('/pu.php?a=clist&catid=13&page='+page, function(res){
    //假设你的列表返回在data集合中
    layui.each(res.data, function(index, item){
    lis.push('<li>烦'+ item.title +'</li>');
    });
    //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
    //pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
    next(lis.join(''), page < res.pages);
    });
    }
    });
    });
    </script>
    调用的页面/pu.php?a=clist&catid=13&page 内容这样写的:
    {"pages":10,"data":[{"title":"\u65e2\u7136\u505a","url":"\/art\/1078.php","catid":"13","updatetime":"1489026330"},{"title":"\u65e2\u7136\u505a","url":"\/art\/1077.php","catid":"13","updatetime":"1488963402"},{"title":"\u65e2\u7136\u505a","url":"\/art\/1076.php","catid":"13","updatetime":"1488945649"},{"title":"\u65e2\u7136\u505a","url":"\/art\/1074.php","catid":"13","updatetime":"1488941090"},{"title":"\u65e2\u7136\u505a","url":"\/art\/1073.php","catid":"13","updatetime":"1488937874"}]}
    可一直都显示“没有更多了”,

    可能是JSON这个数据格式有问题,要是能有个实实在在的案例就好了。
    0 回复
  • Absolutely Absolutely
    8天前
    你说的这两个功能 我正好做了!在我的后台管理系统里面,有个叫Global.js的文件,里面有代码,我还没整理,你不嫌麻烦可以去下载来看看!
    0 回复
  • ✿巭涛 ✿巭涛
    8天前
    @Absolutely 在哪下载您的代码啊?
    0 回复
  • Absolutely Absolutely
    8天前
    0 回复
  • ✿巭涛 ✿巭涛
    8天前
    @Absolutely 不错,非常感谢,分页有了,但信息流加载没看到,望指点下。
    0 回复
  • Absolutely Absolutely
    8天前
    @✿巭涛 在版本更新那个菜单里面
    0 回复
  • Absolutely Absolutely
    8天前
    @✿巭涛 但是我这里目前数据不够,等数据够了,就有效果!
    0 回复
  • ✿巭涛 ✿巭涛
    7天前
    @Absolutely 十分感谢,终于看到个实实在在的案例了。
    0 回复
  • ✿巭涛 ✿巭涛
    7天前
    @Absolutely
    您的文件 http://www.lyblogs.cn/Areas/Admin/Scripts/updatelog-index.js 第51行
    laye.msg(res.Message);
    貌似少敲了一个 r 字母。

    另外,我按照您的代码重新理了下,还是不成功,一直都在打圈,可否帮忙看下是哪里出了问题么?
    我的测试网址是:http://m.haogouwu.com/flow.html ,谢谢了。
    0 回复
  • Absolutely Absolutely
    7天前
    @✿巭涛 嗯 少个R 我发现了!

    你的问题是后台返回的数据是json字符串,我的后台返回的是json对象!
    所以你需要添加JSON.parse(res);或者eval('(' + res+ ')')转换一下
    0 回复
  • ✿巭涛 ✿巭涛
    7天前
    @Absolutely
    原来返回的数据还有对象与字符串之分,哎,原来我一直都找不到庙门啊。
    我把后台返回的数据转换成了json对象,可以获取到值了,但但为何显示时还是在打圈?
    0 回复
最近热帖
vip-admin Html v1.5.0 更新了 - 基于layui的后台模板 1453
一个为您省时省力的后台模板jqadmin 1106
meTools - 基于layui+vue的在线工具网站 977
基于layui的后台模板 - 反正我觉得我的界面是最漂亮的 925
你的案例或技术分享,将会被置顶推荐 863
LayuiHelp,一个良心插件,为你的代码插上翅膀! 767
LayUI SELECT 多级级联实现,理论上是无限级的 603
Admin-Template 后台模板(开发中...) 535
基于TP5加Layui的轻社区系统,争取下个月上线 307
为什么设计项目最初要为数据设计身份指纹(唯一标号)? 259
近期热议
一个为您省时省力的后台模板jqadmin 24
基于layui的后台模板 - 反正我觉得我的界面是最漂亮的 20
LayuiHelp,一个良心插件,为你的代码插上翅膀! 17
layer的使用,以前用的时候还没挺好的怎么现在layer的弹出框一直报错,求大神给指点一下 15
vip-admin Html v1.5.0 更新了 - 基于layui的后台模板 15
form表单提交,监听提交按钮,用ajax异步检测名称是否已存在,ajax 不执行! 14
layui点击左侧固定导航栏时,如何在右侧显示,而并不是打开新窗口呢 12
关于layer弹出层搜索刷新当也问题 12
遮罩通过parent 可以全屏,但窗口不能传值了? 12
为什么layui分页只有一页的情况下不无法显示组件呢? 11