尝试使用jQuery Ajax解析XML文档

时间:2014-01-18 19:05:19

标签: jquery html ajax xml

我一直在拼命想在学校项目的网页上显示一些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中,以便在页面周围进行操作并设计样式?

编辑:感谢你们的帮助。我有几个更快的问题,我不想再发一个帖子。

  1. 我是否可以再次调用此parse_xml函数而不在$(document).ready(function(){?我还在学习jQuery / Javascript,我很尴尬地说我很难过跟上所有这些括号。我需要提供一些相对较大且复杂的XML文件。

  2. 有没有办法在表格中显示某些数据?例如,场地上的XML节点有几个我需要提取的信息,如果我可以将它们加载到表中,那么比单独存储每个信息更方便吗?

  3. 再次感谢帮助人员。

1 个答案:

答案 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的这个控制台上显示。