一、使用技术要点
(1)使用zepto.js的ajax请求;
(2)使用underscore.js的_.template设定模板,模板一般以<script type="text/template"></script>,不是<template></template>
(3)参数是以{data:listObj},而不是listObj
(4)注意each里面data与item的对映
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="js/zepto_1.1.3.js" type="text/javascript" charset="utf-8"></script> <script src="js/underscore.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="page"> <button onclick="sendAjax()">发送请求</button> </div> </body> <script type="text/template" id="template"> <%_.each(data,function(item){%> <div class="item" style="border: 1px #000 solid;"> <div class="storeName"><%=item.storeName%></div> <div class="telephone"><%=item.telephone%></div> <div class="address"><%=item.address%></div> </div> <%})%> </script> <script type="text/javascript"> function sendAjax(options) { var parameter=JSON.stringify({"cityId":10201,"token":"9d48188d9e3b6ca95788ba2dabf78351","appCode":101}); $.ajax({ type:"post", url:"https://m.lechebang.cn/gateway/shop/getServiceNetList", async:true, data:parameter, //请求参数 dataType: "json", success:function(result){ var listObj=result.result.storeDetailResults; var html=''; html=_.template($("#template").html())({data:listObj}); $(".page").html(html); }, }); } </script> </html>