1. 首頁
  2. 問答
  3. 努力與AJAX

努力與AJAX

2014-05-01 137 views
0

所有的縮略圖畫廊。我從來沒有使用過AJAX，但我正在嘗試創建一種縮略圖庫。這個想法是，你可以點擊幾個按鈕中的一個，並根據按下的特定按鈕，一個div將填充來自xml文件的相應信息。還有我運行到...努力與AJAX

  1. 的幾個問題我無法從我的XML文件中的信息顯示出來的HTML 頁面上。
  2. 當我按下一個按鈕，該功能可以運行出現了一些 倍，而不僅僅是一次。

如果任何人都可以使用這些問題的幫助，我已經很感激！

此外，如果任何人有，我怎麼可能會從每個單獨按鈕，它調用它的XML信息的對應陣列通過一些任何提示，我會永遠感激。

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="loadXML.js" /></script> 
     <link href="style.css" rel="stylesheet" type="text/css"> 
     <title>Interesting Animals</title> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <h1>Interesting Animals</h1> 
      <div id="gallery"> 
       <ul id="left"> 
        <li><button class="leftExtreme" type="button" onClick="loadXML(0)"><img src="images/bat_thumb.png"></button></li> 
        <li><button class="leftMid" type="button" onClick="loadXML(1)"><img src="images/elephant_thumb.png"></button></li> 
        <li><button type="button" onClick="loadXML(2)"><img src="images/bear_thumb.png"></button></li> 
        <li><button class="leftMid" type="button" onClick="loadXML(3)"><img src="images/rhino_thumb.png"></button></li> 
        <li><button class="leftExtreme" type="button" onClick="loadXML(4)"><img src="images/meerkat_thumb.png"></button></li> 
       </ul> 
       <div id="animalInfo"> 
        <img src="images/bat.png" height="440" width="276"> 
        <div id="animalText"> 
         <h2 id="commonName">Giant Fruit Bat</h2> 
         <p><span class="description">Scientific Name: </span><span id="scientificName">Pteropus Scapulatus</span></p> 
         <p><span class="description">Diet: </span><span id="diet">Fruit</span></p> 
         <p><span class="description">Habitat: </span><span id="habitat">Southern and Southeast Asia</span></p> 
         <p><span class="description">Interesting Facts: </span><span id="facts">The giant fruit bat has a wing span of up to 5 feet (1.5m). It is the largest bat in the world. It has a very keen sense of smell and a very long muzzle. They roost upside down in the trees and wrap their wings around their bodies. Feeding time is at dusk when they set off to eat fruit. They squish fruit in their jaws and drink the juice but let the seeds and the rest of the fruit fall to the ground. The females give birth to one baby at a time. They will carry their baby around with them for two months.</p> 
        </div><!--animalText--> 
        <br class="clear"> 
       </div><!--animalInfo--> 
       <ul id="right"> 
        <li><button class="rightExtreme" type="button" onClick="loadXML(5)"><img src="images/koala_thumb.png"></button></li> 
        <li><button class="rightMid" type="button" onClick="loadXML(6)"><img src="images/alpaca_thumb.png"></button></li> 
        <li><button class="rightCenter" type="button" onClick="loadXML(7)"><img src="images/platypus_thumb.png"></button></li> 
        <li><button class="rightMid" type="button" onClick="loadXML(8)"><img src="images/roadrunner_thumb.png"></button></li> 
        <li><button class="rightExtreme" type="button" onClick="loadXML(9)"><img src="images/gorilla_thumb.png"></button></li> 
       </ul> 
       <br class="clear">    
      </div> 
     </div><!--wrapper--> 
    </body> 
</html>

的Javascript：

var xmlhttp; 

function loadXML() { 

    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { // code for IE6- 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { 
      changeDiv(); 
     } 
    } 
    xmlhttp.open("GET", "animals.xml", "true"); 
    xmlhttp.send(); 
} 

function changeDiv() { 
    var xmlResponse = xmlhttp.responseXML; 
    root = xmlResponse.documentElement; 
    common = root.getElementByTagName("commonName"); 
    scientific = root.getElementByTagName("scientificName"); 
    food = root.getElementByTagName("diet"); 
    environment = root.getElementByTagName("habitat"); 
    interestingFacts = root.getElementByTagName("facts"); 

    document.getElementById("commonName").innerHTML= common.item(1).firstChild.data; 
    document.getElementById("scientificName").innerHTML= scientific.item(1).firstChild.data; 
    document.getElementById("diet").innerHTML= food.item(1).firstChild.data; 
    document.getElementById("habitat").innerHTML= environment.item(1).firstChild.data; 
    document.getElementById("facts").innerHTML= interestingFacts.item(1).firstChild.data; 
}

XML：

<?xml version="1.0"?> 
<!DOCTYPE allAnimals [ 
    <!ELEMENT allAnimals  (animal+)> 
    <!ELEMENT animal   (commonName, scientificName, diet, habitat, facts)> 
    <!ELEMENT commonName  (#PCDATA)> 
    <!ELEMENT scientificName (#PCDATA)> 
    <!ELEMENT diet   (#PCDATA)> 
    <!ELEMENT habitat   (#PCDATA)> 
    <!ELEMENT facts   (#PCDATA)> 


]> 

<allAnimals> 
    <animal> 
     <commonName>Giant Fruit Bat or Flying Fox</commonName> 
     <scientificName>Pteropus Scapulatus</scientificName> 
     <diet>Fruit</diet> 
     <habitat>Southern and Southeast Asia</habitat> 
     <facts>The giant fruit bat has a wing span of up to 5 feet (1.5m). It is the largest bat in the world. It has a very keen sense of smell and a very long muzzle. They roost upside down in the trees and wrap their wings around their bodies. Feeding time is at dusk when they set off to eat fruit. They squish fruit in their jaws and drink the juice but let the seeds and the rest of the fruit fall to the ground. The females give birth to one baby at a time. They will carry their baby around with them for two months.</facts> 
    </animal> 
    <animal> 
     <commonName>African Elephant</commonName> 
     <scientificName>Loxodonta Africana</scientificName> 
     <diet>Leaves, branches, and fruit</diet> 
     <habitat>Africa, south of the Sahara Desert</habitat> 
     <facts>The African Elephant is the world's largest land animal. Adult males can weigh as much as six tons. They drink more than 25 gallons (100 liters) of water each day and eat up to 650 lbs. (300kg) of food. The trunks of African elephants have two tips which they use like fingertips to pick things up. African elephant calves feed on milk for up to 18 months, and do not breed until at least 11 years old.</facts> 
    </animal> 
    <animal> 
     <commonName>American Black Bear</commonName> 
     <scientificName>Ursus Americanus</scientificName> 
     <diet>Vegetation, honey, insects, and fish</diet> 
     <habitat>North America, including northern Mexico</habitat> 
     <facts>These bears are often found in national parks, where they raid campsites for food. They have a keen sense of smell, and usually hunt at night. They are smaller and less dangerous than their brown bear cousins, like the Grizzly. The American Black Bear will hibernate during the winter months, but if it is disturbed it can wake up because it doesn't sleep too deeply. American black bears will avoid people, but they will defend their cubs if they feel threatened.</facts> 
    </animal> 
    <animal> 
     <commonName>White Rhinoceros</commonName> 
     <scientificName>Ceratotherium Simum</scientificName> 
     <diet>Grass</diet> 
     <habitat>Africa</habitat> 
     <facts>White rhinoceroses are very large. In fact, they are the second largest land animal after elephants and can weigh as much as 3.5 tons. The diet of the White Rhino is mainly made up of grass, which they find growing in large open plains. These magnificent animals have poor eyesight but exceptional hearing and a keen sense of smell. Scientists estimate that there are currently less than 7,000 white rhinos left in the wild.</facts> 
    </animal> 
    <animal> 
     <commonName>Meerkat</commonName> 
     <scientificName>Suricata Suricatta</scientificName> 
     <diet>Insects and birds</diet> 
     <habitat>Southern Africa</habitat> 
     <facts>Meerkats feed together during the day in groups of 20-30 individuals in dry open country. This makes them a target for predators. While some members of a meerkat group look for insects, others act as lookouts popping up on their hind legs and tails. Living in large groups helps meerkats to survive. They shelter in underground burrows.</facts> 
    </animal> 
    <animal> 
     <commonName>Koala</commonName> 
     <scientificName>Phascolarctos Cinereus</scientificName> 
     <diet>Eucalyptus leaves</diet> 
     <habitat>Eastern Australia</habitat> 
     <facts>Koalas are very popular animals. Often called koala bears, koalas are actually not bears at all but marsupials. They have sharp claws that allow them to climb trees to find their food. Koalas only eat eucalyptus leaves. They never need to drink water because eucalyptus leaves provide all the water they need. Female koalas have one baby at a time. The female's pouch open near the rear of her body.</facts> 
    </animal> 
    <animal> 
     <commonName>Alpaca</commonName> 
     <scientificName>Vicugna Pacos</scientificName> 
     <diet>Grass</diet> 
     <habitat>South America</habitat> 
     <facts>Alpacas are a domesticated descendant of guanacos. Instead of working as a pack animal, alpacas are bred and raised for their high quality wool, which is used to make yarn and other products. Some alpacas' wool grows so long that it will almost touch the ground. Alpacas feed on grass, unlike its other South American relatives which feed on bushes.</facts> 
    </animal> 
    <animal> 
     <commonName>Platypus</commonName> 
     <scientificName>Ornithorhynchus Anatinus</scientificName> 
     <diet>Insects and crustaceans</diet> 
     <habitat>Eastern Australia and Tasmania</habitat> 
     <facts>The platypus is one of only three species of mammals that lay eggs. It has a fur-covered body, webbed feet, and a wide beak. It looks sort of like a beaver with a bird's beak. Platypuses find their food at the bottom of the lakes and rivers where they live. They use their sensitive beak to feel for and find food. Male platypuses have a defense against predators: Their hind legs have poisonous spurs, which can leave a painful wound.</facts> 
    </animal> 
    <animal> 
     <commonName>Greater Roadrunner</commonName> 
     <scientificName>Geococcyx Californianus</scientificName> 
     <diet>Lizards and snakes, insects, scorpions to small rodents and small birds, hummingbirds, some fruit</diet> 
     <habitat>Southwestern United States and central Mexico</habitat> 
     <facts>The Greater Roadrunner is one of the few animals that will attack a rattlesnake. To kill this snake, the roadrunner grabs the snake just behind the head, then it hits it against the ground or rocks. Roadrunners live in pairs, defending their area all year.</facts> 
    </animal> 
    <animal> 
     <commonName>Western Gorilla</commonName> 
     <scientificName>Gorilla Gorilla</scientificName> 
     <diet>Leaves</diet> 
     <habitat>Western and Central Africa</habitat> 
     <facts>Gorillas are the largest of the great apes. Great apes can stand on their hind legs. They are also very good with their hands and can use wooden sticks like tools. Gorillas live in groups of up to 20 animals. They eat in the trees and on the ground.</facts> 
    </animal> 
</allAnimals>

來源

2014-05-01 lindsey

回答

1

首先，你需要考慮的JQuery。這將簡化您的代碼和問題。

要加載XML，並把它變成一個div（這是使用JQuery）
HTML：

<div class="gallery"> 
      <ul id="left"> 
       <li><button class="leftExtreme button" type="button" onClick="loadXML(0)"><img src="images/bat_thumb.png"></button></li> 
       <!-- etc --> 
      </ul> 
      <div id="animalInfo"> 
<!-- I would wrap image below in a div and use css to control the height or width as % --> 
       <div class="my_sized_div"><img src="images/my_blank_image_until_click.jpg"></div> 

       <div id="animalText"> 
        <h2 id="commonName">Giant Fruit Bat</h2> 
        <p><span class="description">Scientific Name: </span><span id="scientificName">Pteropus Scapulatus</span></p> 
        <!-- etc --> 
       </div><!--animalText--> 
       <br class="clear"> 
      </div><!--animalInfo--> 
      <ul id="right"> 
       <li><button value="Koala" class="rightExtreme button" type="button"><img src="images/koala_thumb.png"></button></li> 
       <!-- NOTE I removed the onClick call and added the value="" --> 
       <!-- etc --> 
      </ul> 
      <br class="clear">    
     </div> 
</div>

的JQuery/JS（必須包括jQuery庫加載在你的HTML能夠運行此代碼）：

$(document).ready(function() { 
    //Load your XML using ajax 
    //Capture the click 
    $(".button").click(function() { 
    var button_value = $(this).val(); //Now we know what button was clicked. Use this later. 
    $.ajax({ 
    type: "GET", 
    url: "animals.xml", 
    dataType: "xml", 
    success: function(xml) { 
      $(xml).find('animal').each(function() { 
      if($(this).find('commonName').text() == button_value){ 
       $('#commonName').text($(this).find('commonName').text()); 
       //This replaces the text in each span with your content 
       $('#scientificName').text($(this).find('scientificName').text()); 
       //etc 
      } 
      }); 
    } 
    }); 
    }); 
});

您可以通過使用JSON數據集並將其加載到一個變量加快這..

注意：我沒有測試過這個代碼 - 這些只是我的想法。

來源

2014-05-01 11:29:25 RideLikeTheWind

相關問題

 相關問題