javascript - 在 JavaScript 中打开 json 文件

Question

我的网站有一个脚本，用于填充下拉菜单并从 custom.js 文件运行。我从教程中将其拼凑在一起，并且有效。除了一件事之外，我对此非常满意。我必须在脚本中嵌入各级菜单。光是这个功能就有300行，几乎都是菜单。我还想在其他地方使用相同的信息，因此我将各个级别重写为 json 文件。我想要的只是能够在服务器上打开一个 json 文件并通过相同的逻辑运行它。我觉得我已经很接近了，正在研究 Ajax 和 jQuery，但 JavaScript 对我来说很陌生，但我无法将它们拼凑在一起。我希望有人可以帮助我，或者至少在正确的方向上大力插入我。

// Function auto populates dropdown menus. Takes in
// s1 and populates dropdown based on selection
function populatemenu(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    if(s1.value == "animal") {
        var optionArray = ["|",
                           "dog|Dog",
                           "cat|Cat",];
    } else if(s1.value == "vegetable") {
        var optionArray = ["|",
                           "carrots|Carrots",
                           "peas|Peas",];
    }   for(var option in optionArray) {
            var pair = optionArray[option].split("|");
            var newOption = document.createElement("option");
            newOption.value = pair[0];
            newOption.innerHTML = pair[1];
            s2.options.add(newOption);
    }
}

// I think this is close?
function populatesitetest(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    $(function(){
        $.getJSON("/menu_data.json", function(jsdata) {
        jsonObj = jsdata;
        console.log(jsonObj);
        });
    });
        var optionArray = jsonObj[s1.value]
        for(var option in optionArray) {
            var pair = optionArray[option].split("|");
            var newOption = document.createElement("option");
            newOption.value = pair[0];
            newOption.innerHTML = pair[1];
            s2.options.add(newOption);
        }
    }

Answer 1

加载 ajax json 时需要处理数据，这对于理解异步数据连接至关重要，对此进行更改:

//s1 并根据选择填充下拉列表

function populatemenu(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    if(s1.value == "animal") {
        var optionArray = ["|",
                           "dog|Dog",
                           "cat|Cat",];
    } else if(s1.value == "vegetable") {
        var optionArray = ["|",
                           "carrots|Carrots",
                           "peas|Peas",];
    }   for(var option in optionArray) {
            var pair = optionArray[option].split("|");
            var newOption = document.createElement("option");
            newOption.value = pair[0];
            newOption.innerHTML = pair[1];
            s2.options.add(newOption);
    }
}

// I think this is close?
function populatesitetest(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    $(function(){
        $.getJSON("/menu_data.json", function(jsdata) {
        jsonObj = jsdata;
        console.log(jsonObj);
 var optionArray = jsonObj[s1.value]
        for(var option in optionArray) {
            var pair = optionArray[option].split("|");
            var newOption = document.createElement("option");
            newOption.value = pair[0];
            newOption.innerHTML = pair[1];
            s2.options.add(newOption);
        }
        });
    });

    }