如何在單獨的ajax調用中將單獨的json對象從單獨的div中放入同一個文件中？

我對ajax調用和jquery很新，所以我知道這是可怕的錯誤，但我有三個div，我有多個json文件，每個文件都有三個對象。這些對象被稱爲ying，neutral或者yang，並且我試圖將ying中性和陽性對象放置在它們相應的ying中性和陽性div中。請告訴我如何重寫我的腳本來做我想做的事情。我已經在互聯網上搜索了一個具體的例子，把一個json文件分解成多個div，但找不到任何東西。如何在單獨的ajax調用中將單獨的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" 
}

來源

2015-01-21 Matthew Johnson

您的JSON似乎無效格式。 – Terry 2015-01-21 07:17:24

<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>

這裏是t他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

希望它會給你如何使它更好地根據你需要什麼樣的想法的位置完成

來源

2015-01-21 07:18:03

如何在單獨的ajax調用中將單獨的json對象從單獨的div中放入同一個文件中？

回答

相關問題