jQuery，如何用更少的代码将 AJAX JSON 数据加载到 html 数据元素中？答案

【问题标题】：jQuery, how to load AJAX JSON data into html data elements with less code?jQuery，如何用更少的代码将 AJAX JSON 数据加载到 html 数据元素中？
【发布时间】：2013-12-22 10:09:45
【问题描述】：

我有一个使用 $.getJSON 加载 AJAX 文件并将其加载到 2 个 html 标记中的工作脚本。我想扩展 JSON 文件并将不同的数据提供给大约 30 个标签。 JSON 字符串的定义与我认为在某些循环中缩短代码很有用的标记 ID 相同，但我不知道如何定义循环。

如何简化将 JSON 值分配到标签 .html 中以避免脚本中出现 30 行 $('Id').html(data.string)？

接收到的 JSON 数据格式：{"item1":"24","item1d":"8"}

具有已定义 ID 的标签：

<p id="itemp1" class="dfont1"></p>      
<p id="itemp1d" class="dfont3"></p>

工作功能 - 简化为 30 个标签：

function GetIndexData() {
    var param = "&nocache=" + Math.random() * 1000000;
    $.getJSON( 'index.js' , param , function(data) {
        console.log(data);
        $('#itemp1').html(data.itemp1);
        $('#itemp1d').html(data.itemp1d);
        // ... 30x

        // ? how to simplify this part with some loop?

    });
    setTimeout(GetIndexData, 5000);
}

【问题讨论】：

标签： javascript jquery html ajax json

【解决方案1】：

有点像：

for(var key in data) {
    $("#"+key).html(data[key]);
}

【讨论】：

【解决方案2】：

由于对象属性键和元素id看起来一样，所以使用$.each()遍历data的所有属性并设置值

function GetIndexData() {
    var param = "&nocache=" + Math.random() * 1000000;
    $.getJSON('index.js', param, function (data) {
        $.each(data, function (key, val) {
            $('#' + key).html(val);
        })
    });
    setTimeout(GetIndexData, 5000);
}

【讨论】：

【解决方案3】：

只需循环您的数据对象：

function GetIndexData() {
    var param = "&nocache=" + Math.random() * 1000000;
    $.getJSON( 'index.js' , param , function(data) {
        console.log(data);
        for(var id in data) {
            $('#'+id).html(data[id]);
        }
    });
    setTimeout(GetIndexData, 5000);
}

【讨论】：