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

来源：互联网发布：星火英语怎么样知乎编辑：程序博客网时间：2024/06/18 00:07

老方法实现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数据的交互。

2 0