使用 JavaScript/jQuery 在本地获取 JSON

Getting JSON locally using JavaScript/jQuery

本文关键字：获取 JSON JavaScript jQuery 使用      更新时间：2023-09-26

>我在这里读了几个问题，指出由于安全策略等原因，JSON文件无法在谷歌浏览器中本地加载。所以我在 http://youmightnotneedjquery.com/上找到了解决方案。

我的JavaScript现在看起来像这样：

jQuery(document).ready(function($){
    var items = [];
    var settingsFile = "corr/settings.json";
    var sidePanel = $(document.createElement('div')).addClass('corrPanel').appendTo('body');
    /**
     * Gets JSON file
     * @param  string  jsonFile
     * @return json    file contents
     */
    function getSettings(jsonFile) {
        request = new XMLHttpRequest();
        request.open('GET', jsonFile, true);
        request.onload = function() {
            if (request.status >= 200 && request.status < 400) {
                jsonRows = JSON.parse(request.responseText);
                console.log(jsonRows);
                $.each(jsonRows, function(key, row) {
                    items.push("<input type='text' class='iris' id='" + row.section + "'>");
                });
                console.log(items);
            } else {
                console.log("Error getting JSON file");
            }
        };
        request.send();
    }
    getSettings(settingsFile);
    console.log(items);
});

控制台.log返回 JSON 文件的输出，没有问题。

所以，

一切运行良好，但由于我是 JavaScript 的新手（并且真的不知道如何使用那里的函数和属性），数据属性没有设置（并返回），所以结果属性也是未定义的。

你能告诉我如何在函数之外传递请求结果吗？

谢谢

编辑：我将推送结果添加到项目数组，它在getSettings函数的本地上下文中可用，但最后一个控制台.log尚未输出。

整个问题是我试图直接访问 items 属性。但是请求设置是在页面加载后调用的。所以我把逻辑移到了成功部分。

if (request.status >= 200 && request.status < 400) {
    // execute success code and manage items here ...
}
相关文章：