我一直在拼命想在学校项目的网页上显示一些XML数据。到目前为止,我已经看过几个不同的例子,但我不确定我做错了什么。我是Javascript的相对新手,真的很挣扎。我想要做的是从XML文件中提取一些这些信息,然后将其显示在HTML网页上。我附上了我的代码。任何帮助都会很精彩。
<bbgame source="STAT CREW Basketball" version="4.15.03" generated="12/17/2013">
<gametracker gameid="1288244"></gametracker>
<venue gameid="GAME11"
visid="MSU" visname="MISSOURI STATE"
homeid="LOU" homename="LOUISVILLE"
date="12/17/2013" location="KFC Yum! Center, Louisville, KY"
time="9:05PM" attend="21335" schednote="" start="" end="" duration=""
leaguegame="N" neutralgame="N" postseason="N">
<officials text="Doug Sirmons, Rick Crawford, Tim Nestor"></officials>
<rules prds="2" minutes="20" minutesot="5" fouls="5" qh="H"></rules>
</venue>
</bbgame>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="mainstyles.css">
<title>Louisville Cardinals Statistics</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){ // ready document to be loaded
$.ajax({
type: "GET",
url: "lou.xml",
dataType: "xml",
success: function(xml_parse) {
// the return of a ajax trough a xml file, is a xml parsed object, using $, this will be a jquery xml object;
// find all 'gametracker' entryes;
// (each) iteration trough founded entryes;
$(xml_parse).find('gametracker').each(function(){
// select a container were you want to put your data, them append data in it;;
$('.container').append($(this).attr('gameid'));
});
}
});
});
</script>
<div class='container'></div>
</body>
</html>
我的代码似乎应该正常工作。我在同一文件夹中有index.html和xml文件。我也在努力尝试在实际的HTML文档中显示变量。我是否只是将这个document.write包围在一个div中,以便在页面周围进行操作并设计样式?
编辑:感谢你们的帮助。我有几个更快的问题,我不想再发一个帖子。我是否可以再次调用此parse_xml函数而不在$(document).ready(function(){?我还在学习jQuery / Javascript,我很尴尬地说我很难过跟上所有这些括号。我需要提供一些相对较大且复杂的XML文件。
有没有办法在表格中显示某些数据?例如,场地上的XML节点有几个我需要提取的信息,如果我可以将它们加载到表中,那么比单独存储每个信息更方便吗?
再次感谢帮助人员。
答案 0 :(得分:1)
为了开始,你的src for jquery错了,你忘记了http:on the url;
其次,用var
声明的变量只能在声明的函数内部使用,用于创建一个全局变量,而不用var
调用它们;
你无法在浏览器上直接运行,ajax将无法运行,因此你可以使用localhost apache来运行它们......
<script>
$(document).ready(function(){ // ready document to be loaded
$.ajax({
type: "GET",
url: "lou.xml",
dataType: "xml",
success: function(xml) {
// the return of a ajax trough a xml file, is a xml parsed object, using $, this will be a jquery xml object;
// find all 'gametracker' entryes;
// (each) iteration trough founded entryes;
$(xml).find('gametracker').each(function(){
// select a container were you want to put your data, them append data in it;;
$('.container').append($(this).attr('gameid')+' - ');
});
}
});
});
</script>
这个脚本会将带有“容器”类的div放在div上,用' - '
分隔它们<div class='container'></div>
我认为你正在通过最困难的方式学习这一点......试着从这开始:http://learn.jquery.com/javascript-101/
抱歉坏英语:)快乐编码
编辑:在控制台视图上尝试使用Chrome的devtools(在Windows上为f12或在mac上为alt + command + i),如果对代码执行console.log(var)
,则可以实时运行js代码,结果将在devtools的这个控制台上显示。