json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json

这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那里断点,观察是否有错误.

<!DOCTYPE html>

<html>

<head>

    <title>前后端数据交互处理原生JS模板引擎开发</title>

    <meta charset ='utf-8'>

    <script type="text/template" id="tpl"><!--用于存储模板-->

        <div class='product'>

            <div class='imageAll'>

                <img src="{#img#}">

                <div class='layer'>

                    <p>找同款</p>

                    <p>找相似</p>

                </div>

            </div>

            <div class='content'>

                <p class='price'>

                    <span class='price-text'>¥{#price#}</span>

                    <span class='salas'>{#salas#}人付款</span>

                </p>

                <p class='title'>{#title#}</p>

                <p class='store'>

                    <span class='store-text'>{#stroe#}</span>

                    <span class='adress'>{#adress#}</span>

                </p>

            </div>

        </div>

    </script>

    <style>

        body{

            margin:0;

            padding:0;

        }

        #app{

            width:1088px;

            margin:0 auto;

            font-family:'微软雅黑';

        }

        .product{

            float:left;

            width:250px;

            height:360px;

            margin:0 10px;

        }

        .product:hover{

            border:1px solid #F55B24;

        }

        .imageAll{

            position:relative;

            width:250px;

            height:250px;

        }

        .imageAll img{

            width:250px;

            height:220px;

            font-size:0;

            cursor:pointer;

        }

        .imageAll .layer{

            position:absolute;

            left:0;

            bottom:0;

            width:250px;

            height:30px;

        }

        .imageAll .layer p{

            display:block;

            float:left;

            width:124px;

            height:30px;

            font-size:12px;

            color:#fff;

            text-align:center;

            line-height:30px;

            background-color:#ff6700;

            margin:0;

            overflow:hidden;

        }

        .layer p:nth-child(1){

            border-right:1px solid #FCA772;

        }

        .layer p:nth-child(2){

            border-left:1px solid #FCA772;

        }

        .content{

            width:250px;

            height:110px;

        }

        .content .price{

            width:100%;

            height:40px;

            line-height:40px;

            margin:0;

        }

        .price .price-text{

            font-size:16px;

            font-weight:bold;

            color:#ff6700;

        }

        .price .salas{

            float:right;

            font-size:14px;

            color:#A9A3A3;

        }

        .title{

            margin:0;

            color:#666;

            font-size:12px;

        }

        .store{

            margin:0;

        }

        .store .store-text{

            font-size:12px;

            color:#666;

        }

        .store .adress{

            float:right;

            font-size:12px;

            color:#666;

        }

    </style>

</head>

<body>

    <div id='app'></div>

    <script>

    //命名空间

        var Util = {

            getId : function(id){

                return document.getElementById(id);

            },

            ajax : function(url,callback){

                //创建xhr对象

                var xhr = new XMLHttpRequest();

                //订阅事件

                xhr.onreadystatechange = function(){

                    if(xhr.readyState === 4){

                        if(xhr.status === 200){

                            //返回数据

                            // var data = JSON.stringify(xhr.responseText);

                            var data = JSON.parse(xhr.responseText);

                            //处理数据

                             callback && callback(data);

                        }

                    }

                }

                //open方法

                xhr.open('get',url,true);

                //send方法

                xhr.send(null);

            }

        }

        /*

            获取模板字符串

         */

         var html = '';

         var tpl = Util.getId('tpl').innerHTML;

         //用数据格式化模板

         function formString(str,data){

             //字符串替换方法(正则匹配模板{#img#} (\w+)任意多个字符)

             return str.replace(/\{#(\w+)#\}/g,function(match,$1){

                 // console.log(this);

                 // console.log(match,$1);

                  return data[$1];

             });

         };

         // formString(tpl);

         Util.ajax("data/list.json",function(data){

             var data = data.list;

             for(var i =0; i< data.length; i++){

                 html += formString(tpl,data[i]);

             }

             Util.getId('app').innerHTML = html;

             // console.log(formString(tpl,data));

         })

                 //测试

    /*    var html = '';

        Util.ajax("data/list.json",function(data){

            var list = data.list;

            for(var i=0;i<list.length;i++){

                html += '<div>'+list[i].adress+'</div>'

            }

            app.innerHTML = html;

        });*/

    </script>

</body>

</html>

效果:

前后端数据交互处理基于原生JS模板引擎开发的更多相关文章

  1. 两种方法实现asp.net方案的前后端数据交互（aspx文件、html+ashx+ajax）

    一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...

  2. 对GraphQL-BFF：微服务背景下的前后端数据交互方案的研究-------引用

    随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...

  3. vue-resource的使用，前后端数据交互

    vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载:   https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...

  4. web前后端数据交互

    前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...

  5. 前后端数据交互利器--Protobuf

    Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...

  6. 前后端数据交互(八)——请求方法 GET 和 POST 区别

    WEB 开发同学一看 get 和 post 请求方法的区别,第一感觉都是 So easy! 学习ajax.fetch.axios时,发送网络请求携带参数时,都需要分别处理get和post的参数.所以我 ...

  7. 前后端数据交互(二)——原生 ajax 请求详解

    一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件 其他 j ...

  8. SpringMVC前后端数据交互总结

    控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是ser ...

  9. Spring MVC前后端数据交互总结

    控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是ser ...

随机推荐

  1. MySQL中MyISAM与InnoDB区别

    原文:https://blog.csdn.net/frycn/article/details/70158313?utm_source=copy InnoDB:支持事务处理等不加锁读取支持外键支持行锁不 ...

  2. 【Appium】Appium工作原理(2)

    Appium原理 面试的时候,被问到appium原理,一点不会,实在尴尬. 大家可以直接翻看原作https://blog.csdn.net/jffhy2017/article/details/6922 ...

  3. Oracle角色，权限，表空间基础语句

    控制台: -sqlplus         -----连接数据库 -conn sys/123456@orcl as sysdba        -----登录sys -create tablespac ...

  4. 程序执行流程：猜数字游戏；库的使用：turtle

    >>> import turtle >>> turtle.circle(50) >>> turtle.circle(100) Python 3.6 ...

  5. shell中脚本与函数的使用策略

    脚本:运行的副作用不影响父环境,开辟了fork子进程; 函数:副作用,定义的变量,数据默认直接添加到了调用者的环境,也是它自己的环境;不想副作用影响调用者环境,就必须主动用local修饰; shell ...

  6. db2 常见错误以及解决方案[ErrorCode SQLState]

    操作数据库流程中,遇到许多疑问,很多都与SQL CODE和SQL State有关,现在把一个完整的SQLCODE和SQLState不正确信息和有关解释作以下说明,一来可以自己参考,对DB2不正确自行找 ...

  7. L347

    Even Educators Believe These 7 Myths About Learning1. Individuals learn better when they receive inf ...

  8. 删除csdn上面自己上传的资源

    今天想删掉以前的资源,才发现CSDN并没有提供删除资源的功能,然后去网上搜了下,这才删除了,不知道怎么删除的小伙伴看过来~ 首先,找到自己要删除资源的页面,举个栗子 https://download. ...

  9. ASP.NET MVC学习中记录下使用JavaScript和CSS层叠样式表的经历

    首先我是想要在ASP.NET MVC 5.0中使用从jQuery之家下载下来的插件. 在下载了许多我觉得好用方便的插件之后,我在VS2017中新建了一个项目叫MVCTest,然后选择MVC模板,等待自 ...

  10. 第三次Scrum编程冲刺

    小组第三次冲刺的任务及其完成情况描述 回顾第二次任务,完成了基本业务:用户可以使拍摄视频并上传至个人的空间页面,来与关注他的粉丝分享.关注“长大故事”社区中的其他用户,来了解别人的动态.别人所发动态下 ...