堆棧內存溢出
  簡體   English   中英

如何使用JS從XML提取數據

[英]How to extract data from XML using JS

 原文  2011-11-27 18:06:50  3   1    javascript/ xml

問題描述

我正在使用一個簡單的電影數據庫來練習我的JavaScript，並且遇到了從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>

感謝您耐心等待我的提問！

1 個解決方案

解決方案1
 1 已采納  2011-11-27 18:42:32

jQuery為贏！ http://api.jquery.com/jQuery.parseXML/

然后可以將該文檔傳遞給jQuery，以創建可以遍歷和操縱的典型jQuery對象。

如果您熟悉使用jQuery，那么將解析后的數據作為典型的jQuery對象遍歷應該沒有任何問題。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何從 bpmn-js 建模器中提取更新的 XML 字符串？ 如何根據用戶輸入使用PHP和AJAX從XML提取數據？ 如何使用 jquery/javascript 從 xml 中提取數據並發布到 div 如何使用Javascript從xml格式中僅提取所需的數據，如下所示 如何從react js嵌套數組js文件中提取數據？ 如何以編程方式從draw.io PNG中提取XML數據 如何使用angular js從2個表（在sql server中）中提取數據 如何使用node.js從Yahoo Finance JSON中提取數據？ jQuery-如何從顯示XML數據的頁面中提取內容 在javascript中，如何從XML提取這種格式的數據？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM