2016-09-28 50 views
0

只是想設置一個像netflix或谷歌這樣的搜索引擎,它可以在不刷新的情況下更新我的網頁。因此我嘗試了很多,這是我的代碼。但代碼停止在XML的第一個條目,我不知道爲什麼。試圖用javascript顯示javascript的信息

這是我的HTML

<html> 
    <head> 

    </head> 

    <body> 
    <h1>The best films from 1990 to 1999<h1> 


    <table id="demo"></table> 

    Search for movie: 
<input type="text" id="input" onkeyup="loadXml()"> 

    <script> 
function loadXml() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     myFunction(this); 
    } 
    }; 
    xhttp.open("GET", "mediathek.xml", true); 
    xhttp.send(); 
} 
function myFunction(xml) { 
    var i; 
    var xmlDoc = xml.responseXML; 
    var table="<tr><th>Film</th><th>Year</th><th>Director</th><th>Length</th><th>Description</th></tr>"; 
    var x = xmlDoc.getElementsByTagName("film"); 
    var input = document.getElementById("input").value; 
    var size = input.length; 


    for (i = 0; i <x.length; i++) 
    { 
    startString = name.substring(0,size); 


     if (startString.toLowerCase() == input.toLowerCase()) 



     { 
      name=xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue; 
      year=xmlDoc.getElementsByTagName("year")[i].childNodes[0].nodeValue; 
      director=xmlDoc.getElementsByTagName("director")[i].childNodes[0].nodeValue; 
      length=xmlDoc.getElementsByTagName("length")[i].childNodes[0].nodeValue; 
      description=xmlDoc.getElementsByTagName("description")[i].childNodes[0].nodeValue;  
      divText = "<h1>The film details are:</h1><br /><table border=1><tr><th>Name</th><th>Year</th><th>Director</th><th>Length</th><th>Description</th></tr>" + "<tr><td>" + name + "</td><td>" + year + "</td><td>" + director + "</td><td>" + length + "</td><td>" + description + "</td></tr>" + "</table>"; 
      break; 
     } 

     else 
     { 
      divText = divText + "<h2>The film does not exist.</h2>"; 

     } 
    } 
    document.getElementById("results").innerHTML= divText; 




} 
</script> 


    <div id="results" /> 

    </body> 
</html> 

,這是XML

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?> 



<mediathek> 

    <films> 

     <film label="Pulp Fiction"> 
      <name>Pulp Fiction</name> 
      <year>1994</year> 
      <director>Quentin Tarantino</director> 
      <length>154</length> 
      <description>The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.</description> 
     </film> 

     <film label="The Blair Witch Project"> 
      <name>The Blair Witch Project</name> 
      <year>1999</year> 
      <director>Daniel Myrick, Eduardo Sanchez</director> 
      <length>81</length> 
      <description>Three film students vanish after traveling into a Maryland forest to film a documentary on the local Blair Witch legend, leaving only their footage behind.</description> 
     </film> 

     <film label="The Shawshank Redemption"> 
      <name>The Shawshank Redemption</name> 
      <year>1994</year> 
      <director>Frank Darabont</director> 
      <length>142</length> 
      <description>Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.</description> 
     </film> 

     <film label="Saving Private Ryan"> 
      <name>Saving Private Ryan</name> 
      <year>1998</year> 
      <director>Steven Spielberg</director> 
      <length>169</length> 
      <description>Following the Normandy Landings, a group of U.S. soldiers go behind enemy lines to retrieve a paratrooper whose brothers have been killed in action.</description> 
     </film> 

     <film label="The Wedding Singer"> 
      <name>The Wedding Singer</name> 
      <year>1998</year> 
      <director>Frank Coraci</director> 
      <length>95</length> 
      <description>Robbie, a singer, and Julia, a waitress, are both engaged, but to the wrong people. Fortune intervenes to help them discover each other.</description> 
     </film> 

     <film label="Fight Club"> 
      <name>Fight Club</name> 
      <year>1999</year> 
      <director>David Fincher</director> 
      <length>139</length> 
      <description>An insomniac office worker, looking for a way to change his life, crosses paths with a devil-may-care soap maker, forming an underground fight club that evolves into something much, much more.</description> 
     </film> 

     <film label="Titanic"> 
      <name>Titanic</name> 
      <year>1997</year> 
      <director>James Cameron</director> 
      <length>194</length> 
      <description>A seventeen-year-old aristocrat falls in love with a kind but poor artist aboard the luxurious, ill-fated R.M.S. Titanic.</description> 
     </film> 

     <film label="Forrest Gump"> 
      <name>Forrest Gump</name> 
      <year>1994</year> 
      <director>Robert Zemeckis</director> 
      <length>142</length> 
      <description>Forrest Gump, while not intelligent, has accidentally been present at many historic moments, but his true love, Jenny Curran, eludes him.</description> 
     </film> 

     <film label="American Pie"> 
      <name>American Pie</name> 
      <year>1999</year> 
      <director>Paul Weitz, Chris Weitz</director> 
      <length>95</length> 
      <description>Four teenage boys enter a pact to lose their virginity by prom night.</description> 
     </film> 

     <film label="Independence Day"> 
      <name>Independence Day</name> 
      <year>1996</year> 
      <director>Roland Emmerich</director> 
      <length>145</length> 
      <description>The aliens are coming and their goal is to invade and destroy Earth. Fighting superior technology, mankind's best weapon is the will to survive.</description> 
     </film> 

     <film label="Goodfellas"> 
      <name>Goodfellas</name> 
      <year>1990</year> 
      <director>Martin Scorsese</director> 
      <length>146</length> 
      <description>Henry Hill and his friends work their way up through the mob hierarchy.</description> 
     </film> 

     <film label="American Beauty"> 
      <name>American Beauty</name> 
      <year>1999</year> 
      <director>Sam Mendes</director> 
      <length>122</length> 
      <description>A sexually frustrated suburban father has a mid-life crisis after becoming infatuated with his daughter's best friend.</description> 
     </film> 

     <film label="Schindler's List"> 
      <name>Schindler's List</name> 
      <year>1993</year> 
      <director>Steven Spielberg</director> 
      <length>195</length> 
      <description>In German-occupied Poland during World War II, Oskar Schindler gradually becomes concerned for his Jewish workforce after witnessing their persecution by the Nazi Germans.</description> 
     </film> 

     <film label="The Usual Suspects"> 
      <name>The Usual Suspects</name> 
      <year>1995</year> 
      <director>Bryan Singer</director> 
      <length>106</length> 
      <description>A sole survivor tells of the twisty events leading up to a horrific gun battle on a boat, which begin when five criminals meet at a seemingly random police lineup.</description> 
     </film> 

     <film label="The Silence of the Lambs"> 
      <name>The Silence of the Lambs</name> 
      <year>1991</year> 
      <director>Jonathan Demme</director> 
      <length>118</length> 
      <description>A young F.B.I. cadet must confide in an incarcerated and manipulative killer to receive his help on catching another serial killer who skins his victims.</description> 
     </film> 

     <film label="The Big Lebowski"> 
      <name>The Big Lebowski</name> 
      <year>1998</year> 
      <director>Joel Coen, Ethan Coen</director> 
      <length>117</length> 
      <description>"The Dude" Lebowski, mistaken for a millionaire Lebowski, seeks restitution for his ruined rug and enlists his bowling buddies to help get it.</description> 
     </film> 

     <film label="The Matrix"> 
      <name>The Matrix</name> 
      <year>1999</year> 
      <director>Lana Wachowski, Lilly Wachowski</director> 
      <length>136</length> 
      <description>A computer hacker learns from mysterious rebels about the true nature of his reality and his role in the war against its controllers.</description> 
     </film> 

     <film label="Leon: The Professional"> 
      <name>Leon: The Professional</name> 
      <year>1994</year> 
      <director>Luc Besson</director> 
      <length>110</length> 
      <description>Mathilda, a 12-year-old girl, is reluctantly taken in by Léon, a professional assassin, after her family is murdered. Léon and Mathilda form an unusual relationship, as she becomes his protégée and learns the assassin's trade.</description> 
     </film> 

     <film label="Beauty and the Beast"> 
      <name>Beauty and the Beast</name> 
      <year>1991</year> 
      <director>Gary Trousdale, Kirk Wise</director> 
      <length>84</length> 
      <description>Belle, whose father is imprisoned by the Beast, offers herself instead, unaware her captor to be an enchanted prince.</description> 
     </film> 

     <film label="Se7en"> 
      <name>Se7en</name> 
      <year>1995</year> 
      <director>David Fincher</director> 
      <length>127</length> 
      <description>Two detectives, a rookie and a veteran, hunt a serial killer who uses the seven deadly sins as his modus operandi.</description> 
     </film> 



    </films>  

</mediathek> 

回答

0

你有一個break語句,你找到匹配的電影之後,所以循環永遠不會通過剩餘的電影去。

 function loadXml() { 
 
      var xhttp = new XMLHttpRequest(); 
 
      xhttp.onreadystatechange = function() { 
 
      if (this.readyState == 4 && this.status == 200) { 
 
       myFunction(this.responseXML); 
 
      } 
 
      }; 
 
      xhttp.open("GET", "mediathek.xml", true); 
 
      xhttp.send(); 
 
     } 
 

 
     function myFunction(xmlDoc) { 
 
      var tableHead = "<tr><th>Name</th><th>Year</th><th>Director</th><th>Length</th><th>Description</th></tr>"; 
 
      var x = xmlDoc.getElementsByTagName("film"); 
 
      var input = document.getElementById("input").value; 
 
      var size = input.length; 
 
      var filmFound = false; 
 
      var divText = ""; 
 
      var tableRows = ""; 
 
      var name, year, director, length, description, startString; 
 

 
      if (input.length < 1) return; 
 

 
      for (var i = 0; i < x.length; i++) { 
 
      name = xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue; 
 
      startString = name.substring(0, size); 
 

 
      if (startString.toLowerCase() == input.toLowerCase()) { 
 
       filmFound = true; 
 
       year = xmlDoc.getElementsByTagName("year")[i].childNodes[0].nodeValue; 
 
       director = xmlDoc.getElementsByTagName("director")[i].childNodes[0].nodeValue; 
 
       length = xmlDoc.getElementsByTagName("length")[i].childNodes[0].nodeValue; 
 
       description = xmlDoc.getElementsByTagName("description")[i].childNodes[0].nodeValue; 
 
       tableRows += "<tr><td>" + name + "</td><td>" + year + "</td><td>" + director + "</td><td>" + length + "</td><td>" + description + "</td></tr>"; 
 
      } 
 
      } 
 

 
      if (filmFound) { 
 
      divText = "<h1>The film details are:</h1><br /><table border=1>" + tableHead + tableRows + "</table>"; 
 
      } else { 
 
      divText = "<h2>The film does not exist.</h2>"; 
 
      } 
 
      document.getElementById("results").innerHTML = divText; 
 
     }
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <h1>The best films from 1990 to 1999</h1> 
 
</div> 
 
<div class="container"> 
 
    <table id="demo"></table> 
 
</div> 
 
<div class="container"> 
 
    Search for movie: 
 
    <input type="text" id="input" onkeyup="loadXml()"> 
 
</div> 
 
<div class="container" id="results"></div>