使用 Jquery 解析 JSON 数据以设置背景图像


Parsing JSON data with Jquery to set a background image

我正在使用另一个开发人员的代码,客户要求我升级该代码。我需要做的是使用 Jquery 检索 PHP 文件的生成内容并解析它们,以便我可以在页面中使用文件中的元素。生成的内容采用 JSON 格式,如下所示:

    {
    "productid": "3621",
    "id": "24",
    "title": "Oak+Veneer+26mm",
    "description": "Oak+Veneer%2C+26mm+width%2C+21mm+deep%2C+14mm+rebate",
    "mouldingimage": "L1545a.jpg",
    "frameimagetop": "L1545_top.jpg",
    "frameimagebottom": "L1545_bottom.jpg",
    "frameimagevertical": "L1545_vert.jpg",
    "unitprice": "0.18",
    "banda": {},
    "bandb": {},
    "bandc": {},
    "bandd": {},
    "bande": {},
    "notes": {},
    "code": "L1545",
    "deliveryperiodid": "107",
    "deliverybandid": "64",
    "supplierid": "115",
    "date": "2011-10-07+16%3A27%3A32",
    "active": "0",
    "previousunitprice": {}
}

我需要从上面的数据中获取"frameimagetop"的值,然后使用它来设置div 的背景图像。

我尝试过做以下变体,但我无法让它工作:

$.getJSON('/getframedata.php', {
    id: $(this).attr("id")
}, {
    get_param: 'frameimagetop'
}, function (data) {
    $.each(data, function (index, element) {
        $('#frame_top').append($('<div>', {
            text: element.name
        }));

我知道上面不会设置div的背景图像,但目前,我什至无法让它打印出文本。

$.getJSON('/getframedata.php', function(data) {
    var bgImage = data.frameimagetop;
    <code...>
});

有关更多详细信息,请访问 jQuery API:http://api.jquery.com/jQuery.getJSON/比如成功/失败处理程序等...

您提供的JSON是一个对象。这意味着您不应该遍历它(您使用 $.each)来获得一些确切的值。也就是说,如果你需要"frameimagetop"属性,你可以这样做:object.property_name。在您的示例中,它将是:

$.getJSON('/getframedata.php', 
    { id: $(this).attr("id") },
    function(data) { 
       alert(data.frameimagetop);
    }
);

getJSON 是以下方面的快捷方式:

$.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: success
});

大多数使用成功处理程序,因此:

$.getJSON('/getframedata.php', {
    id: $(this).attr("id")
}, function (data) {
    $('#frame_top').css("background-image", "url(" + data.frameimagetop + ")");
});