怎样存储layui模板引擎后台返回的数据，在需要的时候获取

最新推荐文章于 2022-03-26 16:28:24 发布

Skye Lin

最新推荐文章于 2022-03-26 16:28:24 发布

阅读量3.5k

点赞数

分类专栏： html layui 文章标签： layui html

本文链接：https://blog.csdn.net/skye_95/article/details/84502569

版权

html 同时被 2 个专栏收录

35 篇文章 3 订阅

订阅专栏

layui

11 篇文章 0 订阅

订阅专栏

在项目中遇到一个情况，需要动态获取后台的返回数据，并在前台渲染出来，并且能够根据所点击的不同标签，随时获取对应数据。在网上看到两种方法，一种是写一个动态创建div模板的函数，并将返回值作为参数在其中展示出来；一种是layui模板引擎进行数据渲染。

但是这种渲染方式在渲染完成之后不能获得后台返回的完整的数据，暂时相处一种解决办法：将返回值作为一个对象用JSON.stringify()转换成json字符串格式，用data()含函数存储在一个标签中，在需要获取的时候，用$.parseJSON()函数将json字符串转换成json对象，再获取想要的值。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css">
</head>
<body>
<div></div>

<script src="../../layuiadmin/layui/layui.js"></script>
<script>
    layui.use(['jquery','layer'],function () {
        var layer = layui.layer,
            $ = layui.$;

        var res = [
            {   "switchGoodBList":[
                    {
                        "goodsB":"欢乐谷门票",
                        "switchrate":"7"
                    },
                    {
                        "goodsB":"欢乐谷门票",
                        "switchrate":"100"
                    },
                    {
                        "goodsB":"#jifen#",
                        "switchrate":"100"
                    }
                ],
                "launchtime":"2018-10-11",
                "goodsName":"七天酒店",
                "launchusername":"柯南",
                "count":"2"},
            {   "switchGoodBList":[
                    {
                        "goodsB":"养乐多",
                        "switchrate":"7"
                    },
                    {
                        "goodsB":"养乐多",
                        "switchrate":"100"
                    },
                    {
                        "goodsB":"#jifen#",
                        "switchrate":"100"
                    }
                ],
                "launchtime":"2018-10-11",
                "goodsName":"七天酒店",
                "launchusername":"柯南",
                "count":"2"}
                ];

        //存储的时候先将返回值转换成json字符串格式
        var changeto = JSON.stringify(res);
        console.log("json字符串格式：");
        console.log(changeto);
        //用data函数将参数附加在div上
        $("div").data("testdata", changeto);

        //获取的时候先将json字符串转换成json对象
        var changeback = $("div").data("testdata");
        var jsonobj = $.parseJSON(changeback);
        console.log("json字对象格式：");
        console.log(jsonobj);
        //获取返回值
        var goodsname = jsonobj[0].goodsName;
        console.log("房间名称：");
        console.log(goodsname);
        var goodsB = jsonobj[0].switchGoodBList[1].goodsB;
        console.log("交换对象：")
        console.log(goodsB);
    });
</script>
</body>
</html>

结果：