一、使用技术要点
(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>
时间： 2024-11-10 19:29:58