在JavaScript中打开json文件
我有一个用于我的网站的脚本,它填充下拉菜单,并从自定义的.js文件运行。我从教程中拼凑而成,效果很好。除了一件事,我对它非常满意。我必须在脚本中嵌入不同级别的菜单。只有这一个功能是300行,几乎所有的菜单。我还想在其他地方使用相同的信息,因此我将各个级别重写为json文件。我所希望的就是能够在服务器上打开一个json文件,并通过相同的逻辑运行它。我觉得我已经接近了解Ajax和jQuery了,但是JavaScript对我来说是陌生的,但我就是不能很好地将它们组合在一起。我希望有人能帮我,或者至少给我一个正确的方向在JavaScript中打开json文件,javascript,jquery,json,ajax,Javascript,Jquery,Json,Ajax,我有一个用于我的网站的脚本,它填充下拉菜单,并从自定义的.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);
}
}
加载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);
}
});
});
}
非常感谢。这不仅起到了作用,而且让我离它足够近,我可以开始为其他目的修改它。