2011-11-27 28 views
0

我正在研究一個簡單的電影數據庫來練習我的JavaScript,並且遇到了從xml文件中提取信息的困難。讓我解釋一下我的情況。對不起,如果它有點囉嗦!如何使用JS從XML提取數據

我已經創建該接口有三列,其中每個執行下列功能:

列1 - >用戶選擇他們所選擇的膜。

第2列 - >一旦用戶在第1列中選擇了一部電影,則會在此列中顯示更多關於該電影的信息。這包括標題,導演和演員。用戶可以選擇然後選擇演員以找到關於他們的信息。

第3列 - >一旦用戶在列2中選擇了一個演員,那麼他們的名字和他們的照片出現在這一列(使用標籤)。本專欄中的信息還包括電影標題,電影作品(應用標籤)。

但我遇到的困難是如下 - 我如何在實時更新列2,以反映在列1

我使用獲取的相關信息的方法改變一個粗略的想法在第2列中創建一個數組,然後使用indexOf檢索特定影片的細節。我知道這種方法是錯誤的,最好從XML文件中提取相關信息。

如何使用列1選擇中的idx提取相關信息以放入第2列和第3列?

以下是我迄今所做的:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function XMLload() { 
    jQuery.post(url, function(data) {getxml(data)}, 'xml'); 
} 

function dataFromTag(node, t) { 
    var d = node.getElementsByTagName(t); 
    if (d.length == 0) return (''); 
    return (d[0].firstChild.nodeValue); 
} 

jQuery(document).ready(XMLload); 

var url = 'movie.xml'; 

var xmlMovies; 
var aryMovieList = []; 
var xmlActors; 
var aryActors = []; 
var iframeOpen = '<html><head><\/head><body>' 
var iframeClose = '<\/select><\/form><\/body><\/html>' 

function getxml(xmldoc) { 
    xmlMovies = xmldoc.getElementsByTagName('movie'); 
    var hstr = iframeOpen; 
    hstr += '<select size="' + xmlMovies.length + '" onchange="parent.actors(this.selectedIndex);">'; 
    for (var MovieID = 0; MovieID < xmlMovies.length; MovieID++) { 
     aryMovieList[aryMovieList.length] = dataFromTag(xmlMovies[MovieID], "title"); 
     xmlActors = xmlMovies[MovieID].getElementsByTagName("actor"); 

     for (var ActorID = 0; ActorID < xmlActors.length; ActorID++) { 
      aryActors[aryActors.length] = dataFromTag(xmlMovies[MovieID], "director") + "/" + dataFromTag(xmlMovies[MovieID], "title") + "/" + dataFromTag(xmlActors[ActorID], "name"); 
     } 

     hstr += '<option>' + aryMovieList[MovieID] + '<\/option>'; 
    } 
    hstr += iframeClose; 

    // test for aryMovieList 
    // alert(aryMovieList); 
    // test for aryActors 
    // alert(aryActors); 

    with(document.getElementById('movies').contentDocument) { 
     open(); 
     write(hstr); 
     close(); 
    } 
} 

function actors(idx) { 
    var hstr = iframeOpen; 
    var selectActor = []; 
    hstr += 'title: ' + dataFromTag(xmlMovies[idx], 'title'); 
    hstr += '<br>'; 
    hstr += 'director: ' + dataFromTag(xmlMovies[idx], 'director'); 
    hstr += '<br>'; 

    for (var i = 0; i < aryActors.length; i++) { 
     var aryActorList = aryActors[i].indexOf(dataFromTag(xmlMovies[idx], 'director') + '/' + dataFromTag(xmlMovies[idx], 'title')); 
     if (aryActorList >= 0) { 
      selectActor[selectActor.length] = i; 
     } 
    } 

    // alert(selectActor); 

    hstr += '<select size="' + selectActor.length + '" onchange="parent.info(this.selectedIndex);">'; 

    for (var i = 0; i < aryActors.length; i++) { 
     var aryActorList = aryActors[i].indexOf(dataFromTag(xmlMovies[idx], 'director') + '/' + dataFromTag(xmlMovies[idx], 'title')); 
     if (aryActorList >= 0) { 
      hstr += '<option>' + aryActors[i].substring(aryActors[i].lastIndexOf("/") + 1) + '<\/option>'; 
     } 
    } 

    hstr += iframeClose; 

    with(document.getElementById('actors').contentDocument) { 
     open(); 
     write(hstr); 
     close(); 
    } 
} 

function info(idx) { 
    var hstr = iframeOpen; 
    hstr += ''; 
    hstr += iframeClose; 

    with(document.getElementById('info').contentDocument) { 
     open(); 
     write(hstr); 
     close(); 
    } 
} 
</script> 

movie.xml

<movies> 
    <movie> 
     <title>Match Point</title> 
     <director>Woody Allen</director> 
     <image>Match-Point.jpg</image> 
     <actor> 
      <name>Scarlett Johansson</name> 
      <image>Scarlett-Johansson.jpg</image> 
     </actor> 
     <actor> 
      <name>Brian Cox</name> 
      <image>Brian-Cox.jpg</image> 
     </actor> 
     <actor> 
      <name>Matthew Goode</name> 
      <image>Matthew-Goode.jpg</image> 
     </actor> 
     <actor> 
      <name>Penelope Wilton</name> 
      <image>Penelope-Wilton.jpg</image> 
     </actor> 
    </movie> 
    <movie> 
     <title>Inception</title> 
     <director>Christopher Nolan</director> 
     <artwork>Inception.jpg</artwork> 
     <actor> 
      <name>Leonardo DiCaprio</name> 
      <image>Leonardo-DiCaprio.jpg</image> 
     </actor> 
     <actor> 
      <name>Ken Watanabe</name> 
      <image>Ken-Watanabe.jpg</image> 
     </actor> 
     <actor> 
      <name>Joseph Gordon-Levitt</name> 
      <image>Joseph-Gordon-Levitt.jpg</image> 
     </actor> 
     <actor> 
      <name>Marion Cotillard</name> 
      <image>Marion-Cotillard.jpg</image> 
     </actor> 
     <actor> 
      <name>Ellen Page</name> 
      <image>Ellen-Page.jpg</image> 
     </actor> 
     <actor> 
      <name>Tom Hardy</name> 
      <image>Tom-Hardy.jpg</image> 
     </actor> 
    </movie> 
    <movie> 
     <title>Blade II</title> 
     <director>Guillermo del Toro</director> 
     <artwork>Blade-II.jpg</artwork> 
     <actor> 
      <name>Wesley Snipes</name> 
      <image>Wesley-Snipes.jpg</image> 
     </actor> 
     <actor> 
      <name>Kris Kristofferson</name> 
      <image>Kris-Kristofferson.jpg</image> 
     </actor> 
     <actor> 
      <name>Ron Perlman</name> 
      <image>Ron-Perlman.jpg</image> 
     </actor> 
     <actor> 
      <name>Leonor Varela</name> 
      <image>Leonor-Varela.jpg</image> 
     </actor> 
     <actor> 
      <name>Norman Reedus</name> 
      <image>Norman-Reedus.jpg</image> 
     </actor> 
    </movie> 
    <movie> 
     <title>Pulp Fiction</title> 
     <director>Quentin Tarantino</director> 
     <artwork>Pulp-Fiction.jpg</artwork> 
     <actor> 
      <name>John Travolta</name> 
      <image>John-Travolta.jpg</image> 
     </actor> 
     <actor> 
      <name>Samuel L Jackson</name> 
      <image>Samuel-L-Jackson.jpg</image> 
     </actor> 
     <actor> 
      <name>Uma Thurman</name> 
      <image>Uma-Thurman.jpg</image> 
     </actor> 
     <actor> 
      <name>Harvey Keitel</name> 
      <image>Harvey-Keitel.jpg</image> 
     </actor> 
    </movie> 
     <movie> 
     <title>Avatar</title> 
     <director>James Cameron</director> 
     <artwork>Avatar.jpg</artwork> 
     <actor> 
      <name>Sam Worthington</name> 
      <image>Sam-Worthington.jpg</image> 
     </actor> 
     <actor> 
      <name>Zoe Saldana</name> 
      <image>Zoe-Saldana.jpg</image> 
     </actor> 
     <actor> 
      <name>Stephen Lang</name> 
      <image>Stephen-Lang.jpg</image> 
     </actor> 
     <actor> 
      <name>Michelle Rodriguez</name> 
      <image>Michelle-Rodriguez.jpg</image> 
     </actor> 
    </movie> 
</movies> 

感謝您抽出寶貴的耐心與我的問題來承擔!

+0

XML是魔鬼。說出3雹瑪麗的懺悔。 –

+0

哈哈哈,這是需要發生的一個代碼驅魔!你可以提供一些幫助...我會很感激:-) – methuselah

回答

1

jQuery爲勝利! http://api.jquery.com/jQuery.parseXML/

本文檔然後可以被傳遞到jQuery來創建可查詢及操縱一個典型的jQuery 對象。

如果您熟悉使用jQuery,那麼作爲典型的jQuery對象遍歷解析的數據應該沒有任何問題。

+0

如何通過JS訪問XML文件的每個元素?可能嗎?! – methuselah

+0

我對jQuery不太熟悉抱歉! – methuselah

+0

那就沒時間了!潛入:http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery你不會後悔的! –