我在代碼中丟失了什麼？ Javascript和XML

我是XML，html和javascript的初學者。我寫了一些代碼來抓取和連接html中的所有標題元素，但我無法以我想要的方式顯示輸出。有人可以看看我的代碼，並給我一些關於如何修復我的代碼的提示嗎？預先感謝您的幫助。我在代碼中丟失了什麼？ Javascript和XML

電流：結果：城市我要訪問東京，JapanSantorni，GreeceChicago，美國

我想要的東西，看起來像：

結果：
城市我想訪問
日本東京
希臘聖托裏尼
美國芝加哥

下面是XML文件：

<?xml version="1.0"?> 
<rss version="0.92"> 
    <channel> 
     <title>Cities I Want to Visit</title> 
     <link>http://pinterest.com/manicmonster/cities-i-want-to-visit</link> 
     <Description>I love traveling!</Description> 
     <item> 
      <title>Tokyo, Japan</title> 
      <link>http://www.gotokyo.org/en</link> 
     </item> 
     <item> 
      <title>Santorini, Greece</title> 
      <link>http://www.visitgreece.gr/en/greek_islands/santorini</link> 
     </item> 
     <item> 
      <title>Chicago, USA</title> 
      <link>http://www.cityofchicago.org/city/en.html</link> 
     </item> 
     <item> 
      <title>Rome, Italy</title> 
      <link>http://www.turismoroma.it/?lang=en</link> 
     </item> 
    </channel> 
</rss>

下面是HTML文件：

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <title>Practice</title> 
    <meta charset="UTF-8"> 
</head> 
    <body> 
    <div id="clickme" onclick="startAjax()">Click me</div> 
    <script> 
     function startAjax(){ 
      $("#clickme").text("Calling server"); 
      $.ajax({url:"test.xml",  
      success:callbackFunction, error:errorFunction}); 
     } 

     function callbackFunction(data,info){ 
      var titles = $(data).find("title:first"); 
      var items = $(data).find("item title"); 

      if (titles && titles.length) 
      $("#clickme").text("result: " + titles.text() + " " + items.text()); 
      else 
      errorFunction(data, "No titles"); 
      } 

     function errorFunction(data,info){ 
      $("#clickme").text("error occurred:"+info); 
     } 
    </script> 
    </body> 
</html>

來源

2013-07-15 user2203774

function callbackFunction(data,info){ 
    var titles = $(data).find("title:first"), 
     items = $(data).find("item").reverse(), 
     items_idx = items.length, 
     html= ""; 

    while (items_idx--){ 
     var txt = items[items_idx].find("title").text(), 
      url = items[items_idx].find("link").text(); 

     html += "<li><a href='" + url + "'>" + txt + "</a></li>"; 
    } 
    if (titles && titles.length) 
    $("#clickme").text("result: " + titles.text() + " <ul>" + html + "</ul>"); 
    else 
    errorFunction(data, "No titles"); 
}

來源

2013-07-15 22:34:43 Malk

只是我的意見在這裏的編碼風格 - 而不是像這樣遞減長度變量，我會使用傳統的for循環與一個常規的索引變量。這可能工作得很好，但是您將該變量重用爲索引而不是名稱所暗示的內容，如果您再次需要該長度，可能會引起混淆。 –

如果你解釋變化而不是分歧地做，它會有所幫助 – vtortola

var items = $(data).find("item title");

此行得到XML節點的集合。稍後當您的代碼執行此行時：

items.text()

它需要收集並返回逗號分隔的字符串值。（例如東京，日本聖托裏尼，希臘芝加哥，USARome，意大利）

由於Malk暗示，您需要使用循環來獲取每個單獨的值並將它們添加到列表中。您可以使用例如，或者使用jQuery的each方法在您的收藏

html = ""; 
items.each(function(index, value) { 
    html += "<li>" + value + "</li>"; 
});

假設，當然，你想有一個項目符號列表。但這個想法是真實的，迭代收集似乎更接近你想要的。

來源

2013-07-15 23:03:18 lemieuxster

我在代碼中丟失了什麼？ Javascript和XML

回答

相關問題