我对 ajax 调用和 jquery 非常陌生，所以我知道这是非常错误的，但我有三个 div，并且我有多个 json 文件，每个文件都包含三个对象。这些对象称为 ying、neutral 或 yang，我试图将 ying neutral 和 yang 对象放置在相应的 ying neutral 和 yang div 中 请告诉我如何重写我的脚本来做我想做的事。 我在互联网上广泛搜索了将单个 json 文件分解为多个 div 的具体示例，但找不到任何内容。
感谢您的阅读以及您可能提出的任何建议。
这是html和css
<style>
#categoryContainer{
text-align:center;
border: solid black 1px;
margin-bottom: 20px;
border-radius: 5px;
padding-bottom:20px;
}
.category{
display: inline-block;
width:33%;
box-sizing: border-box;
border: solid black 1px;
border-radius: 5px;
}
.foodBtnContainer{
text-align:center;
}
.foodBtn{
box-sizing: border-box;
width: 24%;
height: 56px;
border-radius: 20px;
box-shadow: none;
}
li{
list-style: none;
}
</style>
</head>
<body>
<div id="categoryContainer">
<h1>Categories</h1>
<div class="category" id="ying"><h2>Ying</h2></div>
<div class="category" id="neutral"><h2>Neutral</h2></div>
<div class="category" id="yang"><h2>Yang</h2></div>
</div>
<div class="foodBtnContainer">
<button class="foodBtn" id="vegetables" type="button">VEGETABLES</button>
<button class="foodBtn" id="fruit" type="button">FRUIT</button>
<button class="foodBtn" id="grains" type="button">GRAINS</button>
<button class="foodBtn" id="beans" type="button">BEANS</button>
<button class="foodBtn" id="nuts" type="button">NUTS</button>
<button class="foodBtn" id="oils" type="button">OILS</button>
<button class="foodBtn" id="spreads" type="button">SPREADS</button>
<button class="foodBtn" id="sweeteners" type="button">SWEETENERS</button>
<button class="foodBtn" id="seasonings" type="button">SEASONINGS</button>
<button class="foodBtn" id="seaweed" type="button">SEAWEED</button>
<button class="foodBtn" id="animal" type="button">ANIMAL</button>
<button class="foodBtn" id="seafoodShellfish" type="button">SEAFOOD/SHELLFISH</button>
<button class="foodBtn" id="supplementsHerbs" type="button">SUPPLEMENTS/HERBS</button>
<button class="foodBtn" id="teaBeverages" type="button">TEA/BEVERAGES</button>
<button class="foodBtn" id="alcohol" type="button">ALCOHOL</button>
</div>
这是我试图用我的脚本完成的非常粗略的伪代码
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
$("#vegetables").click(function(){
$.ajax({
dataType: "json",
url: "veggies.json",
data: 'json',
success: function{
if(object=="yang"){
.appendTo( "#yang" );
}
else if(object=="neutral"){
.appendTo( "#neutral" );
}
else if(object=="ying"){
.appendTo( "#ying" );
}
}
});
$("#vegetables").unbind('click');
});
});
这是json
ying{
"one": "cranberries",
"two": "cucumbers",
"three": "dandelion greens"
}
neutral{
"one": "alfalfa sprouts",
"two": "arrow root",
"three": "artichoke"
}
yang{
"one": "plantains",
"two": "plums",
"three": "pomegranates"
}
最佳答案
<style>
#categoryContainer{
text-align:center;
border: solid black 1px;
margin-bottom: 20px;
border-radius: 5px;
padding-bottom:20px;
}
.category{
display: inline-block;
width:33%;
box-sizing: border-box;
border: solid black 1px;
border-radius: 5px;
}
.foodBtnContainer{
text-align:center;
}
.foodBtn{
box-sizing: border-box;
width: 24%;
height: 56px;
border-radius: 20px;
box-shadow: none;
}
li{
list-style: none;
}
</style>
</head>
<body>
<div id="categoryContainer">
<h1>Categories</h1>
<div class="category" id="ying"><h2>Ying</h2></div>
<div class="category" id="neutral"><h2>Neutral</h2></div>
<div class="category" id="yang"><h2>Yang</h2></div>
</div>
<div class="foodBtnContainer">
<button class="foodBtn" id="vegetables" type="button">VEGETABLES</button>
<button class="foodBtn" id="fruit" type="button">FRUIT</button>
<button class="foodBtn" id="grains" type="button">GRAINS</button>
<button class="foodBtn" id="beans" type="button">BEANS</button>
<button class="foodBtn" id="nuts" type="button">NUTS</button>
<button class="foodBtn" id="oils" type="button">OILS</button>
<button class="foodBtn" id="spreads" type="button">SPREADS</button>
<button class="foodBtn" id="sweeteners" type="button">SWEETENERS</button>
<button class="foodBtn" id="seasonings" type="button">SEASONINGS</button>
<button class="foodBtn" id="seaweed" type="button">SEAWEED</button>
<button class="foodBtn" id="animal" type="button">ANIMAL</button>
<button class="foodBtn" id="seafoodShellfish" type="button">SEAFOOD/SHELLFISH</button>
<button class="foodBtn" id="supplementsHerbs" type="button">SUPPLEMENTS/HERBS</button>
<button class="foodBtn" id="teaBeverages" type="button">TEA/BEVERAGES</button>
<button class="foodBtn" id="alcohol" type="button">ALCOHOL</button>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#vegetables").click(function(){
$.ajax({
dataType: "json",
url: "veggies.json",
data: 'json',
type: 'GET',
success: function(data) {
// this will return a json object
// so i need to loop around
$.each(data, function(i, properties){
// i => index like ying, yang ,neutral
// since properties also is a object
$.each(properties, function(x, mydata) {
// x => index like one two three
// mydata => is value => cranberries
$('#' + i).append(mydata);
});
})
}
});
$("#vegetables").unbind('click');
});
});
</script>
</body>
这是 veggies.json
{
"ying": {
"one": "cranberries",
"two": "cucumbers",
"three": "dandelion greens"
},
"neutral": {
"one": "alfalfa sprouts",
"two": "arrow root",
"three": "artichoke"
},
"yang": {
"one": "plantains",
"two": "plums",
"three": "pomegranates"
}
}
你需要把html文件和veggies.json的位置放在一起
希望它能让你知道如何根据你需要完成的事情让它变得更好
关于javascript - 如何通过单个 ajax 调用将同一文件中的不同 json 对象放置在不同的 div 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28061218/