laytpl error:no data报错

最新推荐文章于 2024-05-02 02:12:52 发布

wangs1996

最新推荐文章于 2024-05-02 02:12:52 发布

阅读量7.5k

点赞数

分类专栏： JavaScript jQuery ajax 文章标签： javascript ajax json

本文链接：https://blog.csdn.net/wangs1996/article/details/63278828

版权

JavaScript jQuery 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

laytpl一个轻量级的JavaScript模块引擎，对于传入大量的json数据来说，使用起来很方便。
用法百度即可，讲解的很清晰。
在做项目的时候，想通过ajax发送参数然后接受json文件，再用laytpl，可以减少了很多dom节点操作。最开始的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="view"></div>
    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
    <script src="laytpl.js"></script>
    <script id="demo" type="text/html">
        {{# for(var i = 0, len = d.length; i < len; i++){ }}
        <h1>省份：{{ d[i].name }}</h1>
        <ul>
        {{# for(var j = 0, len = d[i].sons.length; j < len; j++){ }}
        <li>
            <span>城市：{{ d[i].sons[j].name }}</span>
        </li>
        {{# } }}
        </ul>
        {{# } }}
    </script>
    <script>  
    var data ;
    $.ajax({
    type:"get",
    url:"test.json",
    datatype:"json",
    success:function(x){
        data = x;         
      }
    });
    var gettpl = document.getElementById('demo').innerHTML;
    laytpl(gettpl).render(data, function(html){
    document.getElementById('view').innerHTML = html;
    });
    </script>
</body>
</html>

然后浏览器里面什么也没有而且报了错：这里写图片描述 laytpl error:no data!
说明了data里面就是没有，但是我们chrome的控制台下还是能console.log出data
经过小伙伴的提醒，意识到虽然在success之后的函数中将参数x赋给了data，但是由于ajax是异步执行，下面的js语句也会同时进行，所以会报错。
解决方案1：
在ajax中加入async:false,语句，将异步请求改为同步请求。
解决方案2：
仍然是异步执行，但是将后面的代码也都放到success中

        $.ajax({
            type:"get",
            url:"test.json",
            datatype:"json",
            success:function(data){
                var gettpl = document.getElementById('demo').innerHTML;
                laytpl(gettpl).render(data, function(html){
                document.getElementById('view').innerHTML = html;
                });

            }
        });

还是要多弄清原理！

wangs1996

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
laytpl error:no data报错

laytpl一个轻量级的JavaScript模块引擎，对于传入大量的json数据来说，使用起来很方便。用法百度即可，讲解的很清晰。在做项目的时候，想通过ajax发送参数然后接受json文件，再用laytpl，可以减少了很多dom节点操作。最开始的代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫