Question

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

这是我的JSON数据（存储在文件prices.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;

Answer 2

您还应该将prices.xml重命名为prices.json，并检查您的网络服务器是否会在文件上放置正确的mime类型。这不是绝对必要的，但是在下一个人查看这段代码的一年中，他们会想知道为什么xml文件中有json。

Answer 3

使用JSON库，或使用eval，因为您的数据似乎是安全的，请在此处查看： http://jsfiddle.net/m6qW7/2/

var myPrices = '{ "prices": { "bananas": "2,39","apples": "3,39" }}';
 // string data you got as json

 // added "s" to your span ids for consistency
 var myPricesObj = eval( "(" + myPrices + ")" );
 var prices = myPricesObj["prices"];
 for(fruit in prices)
     document.getElementById(fruit + "price").innerHTML = prices[fruit];

从JSON数据替换HTML标记中的项目价格

3 个答案: