Question

我是ajax调用和jquery的新手，所以我知道这是非常错误但我有三个div，我有多个json文件，每个文件中有三个对象。这些物体被称为ying，neutral或yang，我试图把ying中性和阳性物体放在相应的ying中性和阳性divs中请告诉我如何重写我的脚本来做我想做的事情。我已经在互联网上广泛搜索了一个特定的例子，即将一个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"
}

Answer 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的位置相同

希望它会根据你需要完成的事情让你了解如何让它变得更好

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

1 个答案: