首页新闻找找看学习计划

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

实在是太刺激了的主页 实在是太刺激了 | 初学一级 | 园豆:129
提问于:2015-01-07 09:31
< >
分享
最佳答案
0

 1 $.ajax({
2       dataType: 'jsonp',
3       url: 'data.json',
4 jsonp: '$callback', 5       success: showGoods
6     });

你的success都没有传data过去。这是一个问题,其次我也看不到你返回数据额,无法确保你返回json数据是否包含${ Name }等一系列的这段。

收获园豆:20
贫民窟大侠 | 老鸟四级 |园豆:4270 | 2015-01-07 10:17

我不能上传图片,控制台里返回了

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"
        }
    ]
}

   不太明白为什么数据既然请求到了为什么不插入到页面中去呢...

 

实在是太刺激了 | 园豆:129 (初学一级) | 2015-01-07 11:18
<!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}.

 

 

贫民窟大侠 | 园豆:4270 (老鸟四级) | 2015-01-07 11:36

@神叨大侠: 

$.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     

实在是太刺激了 | 园豆:129 (初学一级) | 2015-01-07 12:03
其他回答(3)
0

不知道是不是不应该用jsonp

收获园豆:5
ThreeTree | 园豆:1490 (小虾三级) | 2015-01-07 13:04

就是因为错误使用了jsonp导致的问题,改为json吧

支持(0) 反对(0) ThreeTree | 园豆:1490 (小虾三级) | 2015-01-07 13:18
0

@实在是太刺激了:

模板不变

$('#goodsbox').tmpl(data.List).appendTo('#bbb');

收获园豆:5
Qlin | 园豆:2403 (老鸟四级) | 2015-01-07 13:16
0
 $.ajax("data.json", {

      success: function (data) {
      
        $('#goodsbox').tmpl(data).appendTo("#bbb");
      }
    });

这样就解决了

实在是太刺激了 | 园豆:129 (初学一级) | 2015-01-07 13:48
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册