Question

我从服务中获得json响应如下。

[  
   {  
      "ProductName":"Apple iPhone 4",
      "ProductUrl":"/~/media/upload/4jpg.jpg",
      "ProductPrice":"499"
   },
   {  
      "ProductName":"Apple iPhone 4S",
      "ProductUrl":"/~/media/upload/4s.jpg",
      "ProductPrice":"650"
   }]

通过使用jquery，我想动态地将这些值添加到html中。

HTML code：

 <div class="col-xs-2">
    <a href="#" class="thumbnail">
        <img src="" id="resultImg" width="125" height="125" />
        <div class="caption caption-text">
            <p id="name"></p>
            <p id="price"></p>
        </div>
    </a>
</div>

Jquery代码：我已经编写了以下代码，我循环浏览了json结果，我想追加它。我没有得到正确的输出。只是只附加了最后一个结果。我在做错了吗？ / p>

$.getJSON("http://localhost/webapp/products/service", function (data) {
    var json = JSON.stringify(data);
    console.info(json);
    var htm;
    $.each(JSON.parse(json), function (idx, obj) {
        console.info(obj.ProductUrl);
        var htm = htm + $("col-xs-2").append($("#resultImg").attr("src", obj.ProductUrl)).append($("#name").val(obj.Name));
    });
    $(".row").html(htm);
});

Answer 1

我想你想要这样的东西：

$.getJSON("http://localhost/webapp/products/service", function (data) {
    $.each(data, function(idx, obj) {
        $('<a href="#">').append(
            $('<img>', {
                "class": 'resultImg',
                src: obj.ProductUrl,
                height: 125,
                width: 125
            }),
            $('<div class="caption caption-text">').append(
                $('<p>', { 
                    "class": "name",
                    text: obj.ProductName 
                }),
                $('<p>', { 
                    "class": "price",
                    text: obj.ProductPrice 
                })
            )
        ).appendTo('.col-xs-2');
    });
});

我已将id替换为class，因为您无法拥有重复的ID。

Answer 2

基本解决方案是使用数据模板并填充每个项目的数据。可扩展的解决方案是创建javascript对象以构造显示列表项。

以下是基本解决方案： Javascript代码：

<script type="text/javascript">
$(document).ready(function() {
    var data = '[{"ProductName":"Apple iPhone 4", "ProductUrl":"/~/media/upload/4jpg.jpg","ProductPrice":"499"},{  "ProductName":"Apple iPhone 4S","ProductUrl":"/~/media/upload/4s.jpg","ProductPrice":"650"}]';

    // find the template
    var origin_template = $('#template');

    // loop the data
    $.each($.parseJSON(data), function(index, obj) {
        var dest_template = origin_template; // this like the copy the template html code. but return the jquery object.

        // set the attribute and html text for the target node.
        dest_template.find('.resultImg').attr('src', obj.ProductUrl);
        dest_template.find('.name').html(obj.ProductName);
        dest_template.find('.price').html(obj.ProductPrice);

        // append the html content to the really display list place.
        $('#row').append(dest_template.html());
    });

    // after the loop, remove the tempate node. [This is optional]
    origin_template.remove();
});
</script>

HTML代码：

<div id="row">
    <!-- Your really display list place -->
</div>
<!-- Your tempalte -->
<div id="template" style="display:none;">
    <div class="col-xs-2">
        <a href="#" class="thumbnail">
            <img src="" class="resultImg" width="125" height="125" />
            <div class="caption caption-text">
                <p class="name"></p>
                <p class="price"></p>
            </div>
        </a>
    </div>
</div>

如何使用jquery动态追加json值

2 个答案: