通过ajax实现简单的数据交互（模板引擎）

曾经终败给现在 2023-06-27 03:09 10阅读 0赞

最后的结果是这样的，样式什么的自己调节，本节主要内容是ajax。

思路：  
　　1，对ajax进行封装  
　　2，调用ajax获取数据  
　　3，在ajax获取成功的函数中进行操作  
　　　3.1，模板的书写  
　　　　将需要改变的数据全部使用`{# demo #}`这样的格式书写，以便替换里面的数据  
　　　3.2，将模板里的数据替换成`.json`里的数据  
　　　　3.2.1 创建一个模板格式化函数  
　　　　　使用正则表达式提取出数据，例如提取出`{# demo #}`里的`demo`  
　　　　　利用提取出的数据在`.json`查找，并返回数据。例如`data[‘demo’]`  
　　　3.3 ,遍历数据  
　　　　即每一个`.json`里的数据，都是一个模板，只是数据不同  
　　4，将遍历后的数据输出到页面上

结果大概就是下面这个样子

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]

<!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>前后端实现简单的数据交互</title>
    
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
    
            .product { 
                width: 150px;
                height: 200px;
                float: left;
                border: 1px solid #000;
                padding: 10px;
            }
    
            .product img { 
                width: 90%;
                height: 100px;
                display: block;
                margin: 1% auto;
            }
            .layer>p:first-child,
            .middle>p:first-child,
            .bottom>p:first-child { 
                float: left;
            }
    
            .layer>p:last-child,
            .middle>p:last-child,
            .bottom>p:last-child { 
                float: right;
            }
    
            .layer,
            .middle,
            .bottom { 
                overflow: hidden;
            }
        </style>
    
        
        <script type="text/template" id="app_tpl">
            <div class="product">
                <img src="{#img#}" alt="">
                <div class="layer">
                    <p>找同款</p>
                    <p>找相似</p>
                </div>
                <div class="middle">
                    <p class="price-text">￥{ #price#}</p>
                    <p class="sales">{ #sales#}人付款</p>
                </div>
                <p class="title">{ #title#} </p>
                <div class="bottom">
                    <p class="store-text">{ #store#}</p>
                    <p class="address">{ #address#}</p>
                </div>
            </div>
        </script>
    </head>
    
    <body>
        <div id="app"></div>
    
        <script type="text/javascript">
            // 1,对ajax进行封装
            var Util = { 
                getId: function (idname) { 
                    return document.getElementById(idname);
                },
                ajax: function (obj) { 
                    obj = obj || { };
                    obj.type = obj.type || "GET"
                    obj.url = obj.url || '';
                    obj.data = obj.data || null;
                    obj.async = obj.async || true;
                    obj.success = obj.success || function () { }
                    obj.error = obj.error || function () { }
    
                    //如果传递参数的话：数据data字符串，以&隔开，即后缀
                    var param = [];
                    for (var key in obj.data) { 
                        param.push(key + '=' + obj.data[key]);
                    }
                    var sendData = param.join("&");
    
                    var xhr = new XMLHttpRequest();
                    //当为GET/POST方式发送请求 
                    if (obj.type.toUpperCase() === "GET") { 
                        xhr.open(obj.type, obj.url + "?" + sendData, obj.async);
                        xhr.send();
                    } else { 
                        xhr.open(obj.type, obj.url, obj.async);
                        xhr.setRequestHeader("Content-type",
                            "application/x-www-form-urlencoded;charset=utf-8"); //设置头部信息
                        xhr.send(sendData);
                    }
    
                    xhr.onreadystatechange = function () { 
                        if (xhr.readyState == 4) { 
                            if (xhr.status == 200) { 
                                obj.success && obj.success(JSON.parse(xhr.responseText));
                            } else { 
                                obj.error && obj.error(JSON.parse(xhr.responseText));
                            }
                        }
                    }
                }
            }
    
    
            // 格式话模板功能
            function formatTpl(data, str) { 
                // 寻找 {##}内的数据，并返回何其相关的数据
                return str.replace(/\{#(\w+)#\}/g, function (match, $1) { 
                    return data[$1]
                })
            }
    
            var html = '';
            var tplInner = Util.getId('app_tpl').innerHTML;
    
            // 2，通过ajax获取数据
            Util.ajax({ 
                url: 'data.json',
                success: function (data) { 
                    // console.log(data.data.user);
                    // console.log(Util.getId('app_tpl').innerHTML);
    
                    // 遍历所需要的数据组成的数组并输出至页面上
                    var dataList = data.data.user;
                    for (var i = 0; i < dataList.length; i++) { 
                            // console.log(formatTpl(dataList[i],tplInner));
                            html += formatTpl(dataList[i],tplInner);
                    }
                    Util.getId('app').innerHTML = html
                }
            })
        </script>
    
    
    </body>
    
    </html>

data.json数据

{
      "status": {
        "errno": "0",
        "errmsg": ""
      },
      "data": {
        "user": [
          {"img":"img/pic_1.png","price":"1.00","title":"标题1","sales":"10","store":"店铺1","address":"广东 广州"},
          {"img":"img/pic_2.png","price":"2.00","title":"标题2","sales":"12","store":"店铺2","address":"广东 广州"},
          {"img":"img/pic_3.png","price":"3.00","title":"标题3","sales":"13","store":"店铺3","address":"广东 广州"},
          {"img":"img/pic_4.png","price":"4.00","title":"标题4","sales":"14","store":"店铺4","address":"广东 广州"},
          {"img":"img/pic_5.png","price":"5.00","title":"标题5","sales":"15","store":"店铺5","address":"广东 广州"},
          {"img":"img/pic_6.png","price":"6.00","title":"标题6","sales":"16","store":"店铺6","address":"广东 广州"},
          {"img":"img/pic_7.png","price":"7.00","title":"标题7","sales":"71","store":"店铺7","address":"广东 广州"},
          {"img":"img/pic_8.png","price":"8.00","title":"标题8","sales":"81","store":"店铺8","address":"广东 广州"},
          {"img":"img/pic_9.png","price":"9.00","title":"标题9","sales":"81","store":"店铺9","address":"广东 广州"},
          {"img":"img/pic_10.png","price":"10.00","title":"标题10","sales":"41","store":"店铺10","address":"广东 广州"},
          {"img":"img/pic_11.png","price":"11.00","title":"标题11","sales":"14","store":"店铺11","address":"广东 广州"},
          {"img":"img/pic_12.png","price":"12.00","title":"标题12","sales":"21","store":"店铺12","address":"广东 广州"},
          {"img":"img/pic_13.png","price":"13.00","title":"标题13","sales":"21","store":"店铺13","address":"广东 广州"},
          {"img":"img/pic_14.png","price":"14.00","title":"标题14","sales":"21","store":"店铺14","address":"广东 广州"},
          {"img":"img/pic_15.png","price":"15.00","title":"标题15","sales":"14","store":"店铺15","address":"广东 广州"},
          {"img":"img/pic_16.png","price":"16.00","title":"标题16","sales":"51","store":"店铺16","address":"广东 广州"},
          {"img":"img/pic_17.png","price":"17.00","title":"标题17","sales":"61","store":"店铺17","address":"广东 广州"},
          {"img":"img/pic_18.png","price":"18.00","title":"标题18","sales":"71","store":"店铺18","address":"广东 广州"},
          {"img":"img/pic_19.png","price":"19.00","title":"标题19","sales":"17","store":"店铺19","address":"广东 广州"} 
        ]
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200102131136140.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70