laravel+@verbatim指令直接实现点击异步加载下一页数据

Laravel  /  管理员 发布于 6个月前   133

@verbatim 指令

如果模板中一大部分需要显示 JavaScript 变量,就可以用 @verbatim 指令包裹住 HTML,这样就不用在每个 Blade echo 语句前加 @ 符

案例代码:

<ul id="news_box"></ul>

<div class="showMore" page="1" type="{{$row['pinyin']}}"><span>查看更多</span></div>


@verbatim<script type="text/html" id="tpl">

{{ each data as value index}}

<li>

    <a href="{{value.url}}">{{ value.title }}</a>

    <div class="look_over">{{ value.views }}</div>

</li>

{{ /each }}

</script>

@endverbatim

js:
$(".showMore").click(function(){
  var page=parseInt($(this).attr("page"))+1;
  var type=$(this).attr("type");
  var htmlobj=$.ajax({url:"/api/cardnewsarticles/"+type+"?page="+page,async:false});
  if(htmlobj!=null && htmlobj!=''){
     var jsonObj =htmlobj.responseJSON;
     if(jsonObj !=null){
        var data =jsonObj.data;
        if(data !=null && data.length>0){
           var htmlStr = template( "tpl",  jsonObj);
           $("#news_box").append(htmlStr);
           $(this).attr("page",page);
        }else{
            $(this).html("已加载完");
        }
     }
  }
});

完事

ps:low是low了点,但是我想表达的是可以这么做

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!

该博客于2020-9-28日,后端基于laravel8框架开发
前端页面使用Bootstrap可视化布局系统自动生成

是我仿的原来我的TP5框架写的博客,比较粗糙,底下是入口
侯体宗的博客

      订阅博客周刊

文章归档

  • 2020-04         (5篇)
  • 2020-05         (6篇)
  • 2020-06         (7篇)
  • 2020-07         (8篇)
  • 2020-08         (4篇)
  • 2020-09         (7篇)
  • 2020-10         (6篇)
  • 2020-11         (6篇)
  • 2021-01         (4篇)
  • 2021-02         (2篇)
  • 2021-03         (1篇)
  • 2021-04         (1篇)

文章标签

友情链接

Auther ·HouTiZong
侯体宗的博客
© 2020 zongscan.com
版权所有ICP证 : 粤ICP备20027696号
PHP交流群 也可以扫右边的二维码
侯体宗的博客