在html文件中使用jquery读取xml文件

时间:2013-08-02 11:43:21

标签: jquery xml

我是jQuery的新手,我正在尝试读取xml文件。我创建了一个简单的html文件,如下所示,并在同一目录中有一个名为allTask​​s.xml的xml文件。我在文档加载时看到警报,我看到第二个警告“Here Now”。但是,当我尝试使用find方法时,我无法正确遍历xml。是否有一种很好的方法来测试我是否实际上正在加载xml文件?还应该在html文件中工作还是应该使用php?

任何帮助都会受到极大的欢迎!

html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Read XML File</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  <script type="text/javascript">
      $(document).ready(function(){
        alert('Loaded');

         var $myXML;

         $.get('allTasks.xml', function(data) {
            $myXML = data; ;
             }, 'xml');

             alert('Here now ');

             alert($myXML.find("Tasks>Task>TaskId").text());
      });
  </script>

</head>
<body>

<div data-role="page" id="page1">
  <div data-role="header" class="ui-bar ui-bar-b" style="height:50px;">
  </div>      <!-- end of header  -->


  <div data-role="content">
  <div id='names'></div>

  </div>    <!-- end of content  -->


</div> <!-- end of page div -->

</body>
</html>

XML

<TaskList>
  <Tasks>
    <Task>
      <TaskId>1</TaskId>
      <Name>Name of Task 1</Name>
    </Task>
    <Task>
      <TaskId>2</TaskId>
      <Name>Name of Task 2</Name>
    </Task>
  </Tasks>
</TaskList>

1 个答案:

答案 0 :(得分:1)

$.get('allTasks.xml', function(data) {
    var parsed = $(data);
    alert( parsed.find('Tasks>Task>TaskId').text() );
}