如何通过单个 ajax 调用将来自同一文件的单独 json 对象放在单独的 div 中？答案

【问题标题】：How can I place seperate json objects from the same file in seperate divs with a single ajax call?如何通过单个 ajax 调用将来自同一文件的单独 json 对象放在单独的 div 中？
【发布时间】：2015-01-21 06:52:15
【问题描述】：

我对 ajax 调用和 jquery 非常陌生，所以我知道这是非常错误的，但是我有三个 div，并且我有多个 json 文件，每个文件中都包含三个对象。这些对象被称为 ying、neutral 或 yang，我试图将 ying 中性和 yang 对象放置在它们相应的 ying 中性和 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"
}

【问题讨论】：

您的 JSON 格式似乎无效。

标签： javascript jquery css ajax json

【解决方案1】：

<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的位置一样

希望它可以让您了解如何根据您需要完成的工作使其变得更好

【讨论】：