Question

每2秒钟，我发出一个返回的帖子：

[{"a":false,"i":"58","b":"sergio","p":"0,22","t":15},
{"a":false,"i":"59","b":"sergio","p":"0,23","t":15},
{"a":false,"i":"60","b":"sergio","p":"0,14","t":15},
{"a":false,"i":"61","b":"sergio","p":"0,07","t":15}]

我有一个Javascript函数来捕获这些信息，我希望它也能解析JSON并将值放入适当的元素中。

function updateauctions(response) {
    //Parse JSON and place into HTML elements.

    //For debug purposes.
    alert(response);
}

我正在使用jQuery，我想知道如何获取JSON值，并将它们放入HTML元素中。

div .auctionbox的示例：

<div id="60" class="auctionbox gold">
    //Other things here.
</div>

例如，我有n个数量级为.auctionbox的div，并且每个div的ID都为#i。因此每个JSON对象对应一个.auctionbox。如何将JSON的p值放入相应的#i，.auctionbox？

通过这个简单的例子，我可以开始研究其他要求，我只需要一点点推动。：）

谢谢。

Answer 1

http://jsfiddle.net/mA4Ye/4/

使用模板的解决方案，如果您需要执行某些特定的html + css

HTML

<div id="data">
    <div class="template auctionbox"></div>
</div>

JS

var json = '[{"a":false,"i":"58","b":"sergio","p":"0,22","t":15},' +
    '{"a":false,"i":"59","b":"sergio","p":"0,23","t":15},' +
    '{"a":false,"i":"60","b":"sergio","p":"0,14","t":15},' +
    '{"a":false,"i":"61","b":"sergio","p":"0,07","t":15}]';

var data = $.parseJSON(json);
var $template = $('.template');

$(data).each(function() {
    var $element = $template.clone().removeClass('template').appendTo('#data');
    $element.attr('id', this.i);
    $element.html(this.p);
});

Answer 2

setInterval(function() {
    $.getJSON('your-json-url', function(json) {
        $(json).each(function() {
            $('#'+this.i).html(this.p);
        });
    });
}, 2000);

希望这会有所帮助

Answer 3

var obj = $.parseJSON(data); // data is the returned JSON string
for( var i in obj){
    $('.auctionbox'+i).html( obj[i].a );
}

这会将obj.a的内容添加到包含.auctionbox0，auctionbox1等等的div中。

另外，我不确定您是否在HTML元素上使用数字作为ID。

Answer 4

你可以这样做：

var response = [{"a":false,"i":"58","b":"sergio","p":"0,22","t":15},
{"a":false,"i":"59","b":"sergio","p":"0,23","t":15},
{"a":false,"i":"60","b":"sergio","p":"0,14","t":15},
{"a":false,"i":"61","b":"sergio","p":"0,07","t":15}];

function updateauctions(response) {
    for (i=0; i<response.length; i++){
    //if the ids are unique just leave the class alone and select the div with the id
    var id = 'div#'+response[i].i;

    $(id).html(response[i].p);
    //For debug purposes.
    }
}

Answer 5

假设json响应已经解析为js对象（使用dataType: "json" $.ajax()或使用"json"或{{1}将可选的第4个参数设置为$.get() }），您可以使用$.post()遍历json数组，然后导航到每个$.each()以设置它的值。

div

注意：id不能以数字开头，它们必须以字母字符开头。因为这个，我假设你会在id中添加id。

编辑：这是我建议每2秒做一次的事情：

$.each(response,function(i,item) {
  $("#id-" + item.i).html(item.p);
});

Answer 6

我认为你在函数中想要这样的东西：

$.each(response, function(key, item) {
    $('#' + item.i).text(item.p);
});

Answer 7

我是第二个Samich的回答并说使用了一个专门将json转换为html的模板引擎，如json2html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://json2html.com/js/jquery.json2html-2.3-min.js"></script>

<div id='list'></div>

<script>

var json =
[{"a":false,"i":"58","b":"sergio","p":"0,22","t":15},
{"a":false,"i":"59","b":"sergio","p":"0,23","t":15},
{"a":false,"i":"60","b":"sergio","p":"0,14","t":15},
{"a":false,"i":"61","b":"sergio","p":"0,07","t":15}];

//Transform used to create the div
var transform = 
    {tag:'div',id:'.i',class:'actionbox gold',children:[
        {tag:'span',html:'.b'},
        {tag:'span',html:' + other stuff'}
    ]};

//Render the json into a list of divs
$('#list').json2html(json, transform);
</script>

将json值从json响应放置到HTML元素

7 个答案: