無法將xml數據讀入網頁

Question

我需要將xml文檔讀入網頁。我正在使用ajax，但在閱讀數據時遇到問題。這裏是我的代碼：

function getXML() { 
    var newURL = "https://www.youtube.com/api/timedtext&v=5Ovh9KJ25ow&lang=en"; 
    $(document).ready(function() { 
     $.ajax({ 
      type: "GET", 
      url: newURL, 
      dataType: "xml", 
      success: xmlParser 
     }); 
    }); 

    function xmlParser(xml) { 
     $(xml).find("text").each(function() { 
      alert('hi'); 
      $("#caption").append('<div>' + $(this).find("text").text() + '</div>'); 
     }); 
    } 
} 

在網頁的正文我有<div id="caption"></div>。 如果您查看該網址https://www.youtube.com/api/timedtext?&v=5Ovh9KJ25ow&lang=en，您會看到它是一個帶有「文本」節點的xml文檔。這些節點還包含我將需要的「start」屬性。我把一個JavaScript警報（'嗨'），看看它是否正在運行，我得到「嗨」19倍的預期爲19個文本節點，但沒有被寫入我的分區。一旦我得到數據顯示，我如何訪問「開始」屬性數據？

Answer 1

問題是您正在使用$(this).find("text").text()而不是$(this).text()。

function xmlParser(xml) { 
    $(xml).find("text").each(function() { 
    $("#caption").append('<div>' + $(this).text() + '</div>'); 
    }); 
} 

function xmlParser(xml) { 
 
    $(xml).find("text").each(function() { 
 
    $("#caption").append(
 
     '<li>' + 
 
     '<p>Text: ' + $(this).text() + '</p>' + 
 
     '<p>Start (jQuery way): ' + $(this).attr('start') + '</p>' + 
 
     '<p>Start (JavaScript way): ' + this.getAttribute('start') + '</p>' + 
 
     '</li>' 
 
    ); 
 
    }); 
 
} 
 

 
xmlParser(`<transcript> 
 
<text start="0.01" dur="4.04">{music}</text> 
 
<text start="4.07" dur="4.04"> 
 
What is the One Button Studio? The One Button Studio is simply 
 
</text> 
 
<text start="8.13" dur="4"> 
 
a standard video recording studio where we&#39;ve removed the technology from 
 
</text> 
 
<text start="12.15" dur="4.01"> 
 
the floor and mounted it to the ceiling and we&#39;ve also automated the space. 
 
</text> 
 
<text start="16.18" dur="4"> 
 
We did this to enhance the user experience. You no longer need to know how to work 
 
</text> 
 
<text start="20.2" dur="4.08"> 
 
lights, camera, or audio to create a good quality video. 
 
</text> 
 
<text start="24.3" dur="4.09"> 
 
To work it, we just bring a thumb drive and we simply plug it into the hub here. 
 
</text> 
 
<text start="28.41" dur="4.12"> 
 
And within a few seconds, we&#39;re gonna see ourselves on the 
 
</text> 
 
<text start="32.55" dur="4.08"> 
 
monitor and the lights will come on, and we&#39;re ready to go. To start, we 
 
</text> 
 
<text start="36.65" dur="4.01"> 
 
simply press the button. We get a five second countdown. If we so choose, 
 
</text> 
 
<text start="40.68" dur="4.08"> 
 
we can use a projector to project an image or we can use the green screen on the ceiling to 
 
</text> 
 
<text start="44.78" dur="4.02"> 
 
shoot a standard green screen video. And once we&#39;ve created our video, 
 
</text> 
 
<text start="48.82" dur="4.06"> 
 
we just simply press the button again. It will save that video 
 
</text> 
 
<text start="52.9" dur="4.02"> 
 
to a QuickTime formatted file right to the thumb drive. And when it&#39;s finished, 
 
</text> 
 
<text start="56.94" dur="4.03"> 
 
we can just take that thumb drive out, everything will turn off, and we&#39;re ready to go. 
 
</text> 
 
<text start="60.99" dur="4">{music}</text> 
 
<text start="65.01" dur="4.04"></text> 
 
<text start="69.07" dur="4.01"></text> 
 
<text start="73.1" dur="2.668"></text> 
 
</transcript>`)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="caption"></ul>