0
0

handlebars.js使用：用ajax渲染内容到前端

背景：之前写前后端不分离的项目，都是通过ThinkTemplate（thinkphp）和Thymeleaf、FreeMarker（Java）去实现的，但是有些数据需要动态去体现使用过ajax去手动操作dom通常有点麻烦，偶然间知道这个js模板还是蛮感兴趣，功能强大。

文章目录

前言

    小弟之前愚蠢的想法就是ajax请求的话都是一个一个去添加，每一块内容先拼接好一整块，然后再循环输出。（这里指ajax请求的情况下，其他情况下不分离模板直接for很快的）


    直到今天，遇到了handlebars.js

    handlebars.js可以在提前设置好的模板内渲染出内容，功能强大下面演示

提示：以下是本篇文章正文内容，下面案例可供参考

一、Handlebars.js是什么？

    Handlebars.js是一个Javascript客户端的模板引擎（它也能用于服务器端）。它是一个Javascript库，就像你在页面中包含其他.js文件一样。有了它，在你的HTML页面内添加模板，模板会被你通过Handlebars.js函数传递的数据中的值解析或者插值。

二、使用步骤（each-基本循环使用方法）

1.设置模板

代码如下：

html：

<body>
    <script id="template" type="text/x-handlebars-template">
        <ul>
            {{#each items}}
                <li>{{this.name}} - {{this.value}}</li>
            {{/each}}
        </ul>
    </script>
    <div id="result"></div>
    <a href="javascript:;" onclick="ceshi()">测试</a>
    <a href="javascript:;" onclick="xuanran()">渲染</a>
</body>

template就是我们设置好的模板，相当于你设置好了一个商品展示卡（我上面的图）

2.Ajax获取数据

代码如下：

Javascript：

<script>
function ceshi(){
    $.ajax({
        type: "GET",
        url: "",
        success: function(e) {
            console.log(e)
        },
        error: function() {
            console.log('失败')
        }
    })
};
function xuanran(){
    $.ajax({
        url: '',
        method: 'GET',
        success: function(data) {
            var source = $('#template').html();
            var template = Handlebars.compile(source);
            var html = template({ items: data.data });
            console.log(html);
            $('#result').html(html);
        }
    });
};
</script>

这里是利用Ajax去请求后端获取数据。

这里可以看出，数据是从这边传进去的：

template({ items: data.data });

3.后端提供数据

public function test()
    {
        $a = [
            ['name' => '名字','value'   =>  '小明'],
            ['name' => '年龄','value'   =>  '18'],
            ['name' => '性别','value'   =>  '男'],
            ['name' => '身高','value'   =>  '181'],
            ['name' => '体重','value'   =>  '70kg'],
        ];

        if(false === $this->request->isAjax())
        {
            return view();
        }

        return api($a,200,'请求成功');
        
    }

这里是测试数据故意弄成这样子

这种数据格式也是经常见吧，不像常规的很好认的那种

效果

点击获取数据后就会渲染。

分析

你得到数据之后，他是这样的

//这个js
var html = template({ items: data.data });

//说明你已经拿到这样的数据了
"data": [
        {
            "name": "名字",
            "value": "小明"
        },
        {
            "name": "年龄",
            "value": "18"
        },
        {
            "name": "性别",
            "value": "男"
        },
        {
            "name": "身高",
            "value": "181"
        },
        {
            "name": "体重",
            "value": "70kg"
        }
    ]

//然后这边#each表示进入
{{#each items}}

//说明到达每一块
{
     "name": "名字",
     "value": "小明"
}

//这里你就只能用
{{this.name}} - {{this.value}}

//这种模板还是很可以

三、进阶

这样我们就可以做更复杂的操作了

each-基本循环使用方法

前端：

<body>
    <h1>each-基本循环使用方法</h1>
    <!--基础html框架-->
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="tableList">
        </tbody>
    </table>

    <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
    <script id="table-template" type="text/x-handlebars-template">
        {{#each student}}
        <tr>
            <td>{{name}}</td>
            <td>{{sex}}</td>
            <td>{{age}}</td>
        </tr>
        {{/each}}
    </script>
</body>

    <!--进行数据处理、html构造-->
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                url:'student',
                method:'GET',
                success:function(data){
                var myTemplate = Handlebars.compile($("#table-template").html());
                //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
                $('#tableList').html(myTemplate(data.data));
                }
            });
        });
    </script>

后端：

public function test1()
    {
        if(false === $this->request->isAjax())
        {
            return view();
        }
    }

public function student()
    {
        $student    =   [
            [
                'name'  => "张三",
                'sex'   => "男",
                'age'   => 28
            ],
            [
                'name'  => "李四",
                'sex'   => "女",
                'age'   => 30
            ],
            [
                'name'  => "妞妞",
                'sex'   => "女",
                'age'   => 32
            ]
        ];

        return api(['student'=>$student],200,'请求成功');
    }

应该很好分析这个是干嘛的

with-进入到某个属性(进入到某个上下文环境)

分析：

首先来构造一个复杂的json（工作中经常遇到的，给前端小姐姐上点压力）

先给大家看看前端的页面加载出来是没有数据的

等到数据出来时，他才开始渲染出来：（其实这一直是我想要的，用vue或者其他也能达到这种效果，但是还是喜欢有些杂糅在一起的）

代码如下：

前端：

<body>
       <h1>with-进入到某个属性(进入到某个上下文环境)</h1>
        <!--基础html框架-->
       <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>兴趣爱好</th>
            </tr>
        </thead>
        <tbody id="tableList">
        </tbody>
    </table>
     <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
  <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
    <script id="table-template" type="text/x-handlebars-template">
      {{#each this}}
        <tr>
            <td>{{name}}</td>
            <td>{{sex}}</td>
            <td>{{age}}</td>
            <td>
                 {{#with favorite}}
                    {{#each this}}
                        <p>{{name}}</p>
                    {{/each}}
                 {{/with}}
            </td>
        </tr>
        {{/each}}
    </script>
</body>

    <!--进行数据处理、html构造-->
    <script type="text/javascript">
       $(document).ready(function() {
        $.ajax({
                url:'test2api',
                method:'GET',
                success:function(data){
                //$("#table-template").html()是jquery的语法。。。
                var myTemplate = Handlebars.compile($("#table-template").html());
                //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
                $('#tableList').html(myTemplate(data.data.student));
                }
            });
     });
  </script>

后端：

    public function test2()
    {
        if(false === $this->request->isAjax())
        {
            return view();
        }
    }

    public function test2api()
    {
        $student  =   [
            [
                'name'  => "张三丰",
                'sex'   => "男",
                'age'   => 28,
                'favorite'  =>[
                    ['name' =>  "唱歌"],
                    ['name' =>  "篮球"]
                ]
            ],
            [
                'name'  => "李妮妮",
                'sex'   => "女",
                'age'   => 30,
                'favorite'  =>[
                    ['name' =>  "上网"],
                    ['name' =>  "足球"]
                ]
            ],
            [
                'name'  => "王妞妞",
                'sex'   => "女",
                'age'   => 18,
                'favorite'  =>[
                    ['name' =>  "电影"],
                    ['name' =>  "旅游"]
                ]
            ]
        ];

        return api(['student'=>$student],200,'请求成功');

    }

这个老哥写的好，可以参考他的，我也是参考他的：JavaScript页面模版引擎handlebars.js学习及使用_handlebars.js for-CSDN博客

对了我这tp8写的返回json的函数是这个：

function api($data, $code = 200, $msg = 'Success')
{
    $result = [
        'code' => $code,
        'message' => $msg,
        'data' => $data,
    ];

    return json($result);
}

放在公共函数那边

总结

Ajax渲染页面的很早就想用找不到方便的，奈何本身就懒得写dom（我很菜），找到这个可以做很多事。

有的时候咱页面又不想被扒下来，就可以用这种方式

1.在Ajax请求的时候加个加个参数：域名还是其他加密起来，传过去参数（域名）不对，就得不到数据了，跨域也给它开上。

var domain = document.domain;
$.ajax({
        url: '/xxxxx?domain='+domain,
        method: 'GET',
        success: function(data) {
            var source = $('#template').html();
            var template = Handlebars.compile(source);
            var html = template({ items: data.data });
            console.log(html);
            $('#result').html(html);
        }
    });

2.把F12禁用掉，不要让他看到咱返回的数据结构。

标签： 前端
本文转载自: https://blog.csdn.net/m0_55735473/article/details/142489690
版权归原作者 小于晏 所有， 如有侵权，请联系我们删除。
登录后发布评论

“handlebars.js使用：用ajax渲染内容到前端”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

Git 查看当前分支是基于哪个分支拉取（源头分支）

推荐一个开源的kafka可视化客户端GUI工具（Kafka King）

Python——脚本实现datax全量同步mysql到hive

在vue2中使用webrtcstreamer解析播放rtsp流

webrtc视频jitterbuffer全网最详细分析

【MySQL】索引

理解vllm分布式推理服务中的多节点Multi-Node部署方式

文章导航