我正在研究一個簡單的電影數據庫來練習我的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>
感謝您抽出寶貴的耐心與我的問題來承擔!
XML是魔鬼。說出3雹瑪麗的懺悔。 –
哈哈哈,這是需要發生的一個代碼驅魔!你可以提供一些幫助...我會很感激:-) – methuselah