Question

我正在尝试使用问题中提到的函数显示JSON文件的内容。这是JSON对象。

可以直接通过javascript完成，因此，只要用户打开此HTML文件，它就会立即显示JSON对象。或者可能通过单击按钮显示JSON对象内容。

{"menu": {
"header": "SVG Viewer",
"items": [
    {"id": "Open"},
    {"id": "OpenNew", "label": "Open New"},
    null,
    {"id": "ZoomIn", "label": "Zoom In"},
    {"id": "ZoomOut", "label": "Zoom Out"},
    {"id": "OriginalView", "label": "Original View"},
    null,
    {"id": "Quality"},
    {"id": "Pause"},
    {"id": "Mute"},
    null,
    {"id": "Find", "label": "Find..."},
    {"id": "FindAgain", "label": "Find Again"},
    {"id": "Copy"},
    {"id": "CopyAgain", "label": "Copy Again"},
    {"id": "CopySVG", "label": "Copy SVG"},
    {"id": "ViewSVG", "label": "View SVG"},
    {"id": "ViewSource", "label": "View Source"},
    {"id": "SaveAs", "label": "Save As"},
    null,
    {"id": "Help"},
    {"id": "About", "label": "About Adobe CVG Viewer..."}
    ]
}}

Answer 1

以下是加载JSON数据的XMLHttpRequest用法的典型示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);

xhr.onreadystatechange = function() {
    if (this.readyState === 4) {
        if (this.status >= 200 && this.status < 400) {
            var data = JSON.parse(this.responseText);
            document.getElementById('out').innerHTML = JSON.stringify(data, null, '  ');
        }
    }
};

xhr.send();

出于演示目的，我在div#out中渲染数据。

如何使用xmlhttprequest显示JSON对象并仅使用HTML / Jscript进行异步？

1 个答案:

演示：http://plnkr.co/edit/0wZ79wbmSYSalyIP96x7?p=preview