javascript - 从 JSON 数据替换 HTML 标签中的商品价格

Question

我有一个非常简单的问题，但我就是无法弄清楚。 我的 Javascript 知识有点生疏:-)

这是我的 JSON 数据(存储在文件 rates.xml 中)

{
"prices": {
"bananas": "2,39",
"apples": "3,39"
}
}

这是我的 html:

<ul>
<LI>Our price for bananas:<SPAN id="bananaprice">BANANA PRICE SHOULD GO HERE</SPAN></LI>
<LI>Our price for apples:<SPAN id="appleprice">APPLE PRICE SHOULD GO HERE</SPAN></LI>
</ul>

我真正需要的是一个 javascript(如果可能的话，不需要 jquery)，它可以从prices.xml 中提取值并替换 SPAN 值。 我不需要一个执行循环之类的“超灵活”脚本。 它必须非常简单。

提前非常感谢

Answer 1

假设您使用 jQuery 来处理 AJAX 请求。

$.ajax({
    url: yourURL
    dataType: 'json',
    success: function( data )
    {
        var prices = data.prices;

        $('#bananaprice').text( prices.bananas );
        $('#appleprice').text( prices.apples );
    }
});

如果您不使用 jQuery 或 AJAX，那么您需要为对象分配一个变量来引用它们。

var items = {
    "prices" : {
        "bananas" : "$X.XX",
        "apples" : "$X.XX"
    }
};

var banana = document.getElementById('bananaprice'),
    apple = document.getElementById('appleprice')
    price = items.prices;

banana.innerHTML = price.bananas;
apple.innerHTML = price.apples;