基于HTML模板和JSON数据的JavaScript交互

最新推荐文章于 2024-09-20 11:42:37 发布

小白变怪兽

最新推荐文章于 2024-09-20 11:42:37 发布

阅读量4k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/u013558749/article/details/52445049

版权

javascript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

老方法实现ul下的li数据的迭代：

var html = '';
function getHtml(){
    for(var i = 0; i< indexInfo.list.length; i++){
        html += '<li>'+...+'</li>'
    }
    return html;
}

$('ul').html(html)

使用上述老方法的话，在后期我们更改html结构的时候会造成比较大的麻烦，而我们接下来所要讲述的利用模板的方法就可以很好的解决这个麻烦。

首先我们先来定义一下html模版：如下代码所示就是我们需要设置的模版了。

   <ul class="list js-list">
          <div class="js-test" style="display:none;">
              <li class="item">
                   <div class="item-con">
                       <img src="$proImg$"/>
                       <em>$proTitle$</em>
                       <span>$proPrice$</span>
                   </div>
               </li>
           </div>
    </ul>

接下来我们来定义一个json数据：代码如下

var indexInfo ={ 'list':[
          {
            'proTitle': '金箔 全城热恋 金玫瑰aaaa',
            'proPrice': '99.00',
            'proImg': './img/zhubao1.jpg'
          },
          {
            'proTitle': '金箔 全城热恋 金玫瑰2',
            'proPrice': '919.00',
            'proImg': './img/zhubao1.jpg'
          },
          {
            'proTitle': '金箔 全城热恋 金玫瑰3',
            'proPrice': '919.00',
            'proImg': './img/zhubao1.jpg'
          },
          {
            'proTitle': '金箔 全城热恋 金玫瑰4',
            'proPrice': '919.00',
            'proImg': './img/zhubao1.jpg'
          }
        ]
  }

另外就需要定义一个基于字符串原型的方法（固定的方法）：代码如下

String.prototype.temp = function(obj) {
    return this.replace(/\$\w+\$/gi, function(matchs) {
        var returns = obj[matchs.replace(/\$/g, "")];      
        return (returns + "") == "undefined"? "": returns;
    });
};

最后就是利用js实现模版的使用了；

      var htmlList = '', htmlTemp = $(".js-test").html();
      indexInfo.list.forEach(function(object) {
          htmlList += htmlTemp.temp(object);
      });

      $(".js-list").html(htmlList);

这样，我们就实现了基于html模板的json数据的交互。