jquery.tmpl.js怎么调用json数据呢？
0
悬赏园豆：30
[已解决问题]
解决于 2015-01-07 13:49
1 <script id="goodsbox" type="text/x-jquery-tmpl"> 2 <li> 3 <a href="#"> 4 <div class="goodsbox"> 5 <div class="goods_img"><img src="${Preview}" alt="" /></div> 6 <div class="goods_info"> 7 <h3>${ Name }</h3> 8 <div class="goods_price"> 9 <span>￥ ${ Price }<del>￥ ${ RefPrice }</del></span> 10 11 </div> 12 <div class="volume">销量：${Volume}件</div> 13 </div> 14 </div> 15 16 </a> 17 </li> 18 19 </script>
1 $.ajax({ 2 dataType: 'jsonp', 3 url: 'data.json', 4 jsonp: '$callback', 5 success: showGoods 6 }); 7 8 function showGoods(data) { 9 $('#goodsbox').tmpl(data).appendTo('#bbb');
}
用的是jquery.tmpl.js，调用同目录下的一个data.json文件，用firebug控制台显示GET到数据了，但是为什么数据没有显示到指定的#bbb标签里呢？ 请教大神
参考的一片文章：http://weblogs.asp.net/dwahlin/reducing-code-by-using-jquery-templates
最佳答案
0
1 $.ajax({
2 dataType: 'jsonp',
3 url: 'data.json',
4 jsonp: '$callback', 5 success: showGoods
6 });
你的success都没有传data过去。这是一个问题，其次我也看不到你返回数据额，无法确保你返回json数据是否包含${ Name }等一系列的这段。
收获园豆：20
我不能上传图片，控制台里返回了
|
GET http://localhost:1990/data.json?$callback=jQuery1102018163251422201943_1420600353944&_=1420600353945
|
200 OK
|
0ms |
这是data.json文件
{ "Type": "Wine", "List": [ { "Id": 2, "Name": "红葡萄酒测试", "Price": 10, "RefPrice": 10, "Volume": 11, "Preview": "http://www.xxx.com" }, { "Id": 3, "Name": "干红葡萄酒", "Price": 100, "RefPrice": 100, "Volume": 0, "Preview": "http://www.xxx.com" } ] }
不太明白为什么数据既然请求到了为什么不插入到页面中去呢...
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="../JS/jquery-1.8.2.js"></script> <script src="jquery.tmpl.min.js" type="text/javascript"></script> <script src="../JS/jquery.tmpl.js"></script> <script> $(function () { var website = [{ url: 'www.qinhai.cc', name: '个人主页', tags: ['111', '222'] }, { url: 'zzzz', name: '百度', tags: ['333', '444'] }]; $('#myTemplate').tmpl(website, { getTags: function (separator) { return this.data.tags.join(separator); } }).appendTo('#rows'); }); </script> <script id="myTemplate" type="text/x-jquery-tmpl"> <tr><td>${$data.url}</td><td>${$data.name}</td><td>${$item.getTags(';')}</td></tr> </script> </head> <body> <table cellspacing="0" cellpadding="3" border="1"> <tbody id="rows"></tbody> </table> </body> </html>
这是demo。
@实在是太刺激了:
好吧，我知道了。如果你返回的是一个实体，${Name} ，这样既可。也就是Josn数据是这种形式
[{
"Id": 3,
"Name": "干红葡萄酒",
"Price": 100,
"RefPrice": 100,
"Volume": 0,
"Preview": "http://www.xxx.com"
}]
.如果你返回的是一个对象的话，应该是需要点出来，不妨这样试试。${$List.Name}.
@神叨大侠:
$.ajax({ dataType: 'jsonp', url: 'data.json', jsonp: '$callback', success: function (data) { $('#goodsbox').tmpl(data).appendTo('#bbb'); }, error: function (jqxhr, status, errorMsg) { console.log("Error: " + status); } });
我试了${$List.Name}还是不显示数据，我加了错误提示，Error: parsererror
其他回答(3)
0
不知道是不是不应该用jsonp
收获园豆：5
就是因为错误使用了jsonp导致的问题，改为json吧
0
@实在是太刺激了:
模板不变
$('#goodsbox').tmpl(data.List).appendTo('#bbb');
收获园豆：5
0
$.ajax("data.json", {
success: function (data) {
$('#goodsbox').tmpl(data).appendTo("#bbb");
}
});
这样就解决了
