如何使用jQuery从XML中查找/提取数据

Question

如何使用jQuery从XML中查找/提取数据

7

我正在尝试从下面的xml中提取StateLongName和StateShortName值。

我知道使用jQuery可以有一种简单优雅的方法来实现这一点。

<NewDataSet>
  <Table>
    <StateLongName>Alabama</StateLongName>
    <StateShortName>AL</StateShortName>
  </Table>
  <Table>
    <StateLongName>Alaska</StateLongName>
    <StateShortName>AK</StateShortName>
  </Table>

...elments removed for brevity

</NewDataSet>

以下是我尝试过的方法。

将上面的 xml 加载到一个名为 xml 的 Javascript 变量中。

尝试 #1

$(xml).find("TABLE").each(function()
{
  var stateName = $(this).find("StateLongName").innerText;
  var stateCode = $(this).find("StateShortName").innerText;
});

第一次尝试没有找到任何内容，也没有进入加载stateName和stateCode变量的内部。

尝试 #2

$(xml).find("StateLongName").each(function()
{
  var stateName = $(this).find("StateLongName").innerText;
  var stateCode = $(this).find("StateShortName").innerText;
});

尝试 #2 找到了匹配项，但是 stateName 和 stateCode 未定义。

尝试 #3：

$(xml).find("StateLongName").each(function()
{
  var stateName = $($(xml).find('StateLongName').parent()[0].innerHTML)[1].data;
  var stateCode = $($(xml).find('StateLongName').parent()[0].innerHTML)[5].data;
});

尝试#3可以，但应该有更好的方法。请给我指点迷津。

感谢您的时间！

- user307199

请忽略我的回答 - 我以为你的问题更加普遍！ - Vivin Paliath

2个回答

2

$.ajax({
             type: "GET",
             url: "labels.xml",
             dataType: "xml",
             success: function(xml) {
                 $(xml).find('label').each(function(){
                     var id_text = $(this).attr('id')
                     var name_text = $(this).find('name').text()

                     $('<li></li>')
                         .html(name_text + ' (' + id_text + ')')
                         .appendTo('#update-target ol');
                 }); //close each(
             }
         }); //close $.ajax(

以下是示例xml:

<?xml version="1.0" encoding="iso-8859-1"?>


<labels>
   <label id='ep' added="2003-06-10">
     <name>Ezra Pound</name>
     <address>
       <street>45 Usura Place</street>
       <city>Hailey</city>
       <province>ID</province>
     </address>
   </label>
   <label id='tse' added="2003-06-20">
     <name>Thomas Eliot</name>
     <address>
       <street>3 Prufrock Lane</street>
       <city>Stamford</city>
       <province>CT</province>
     </address>
   </label>
   <label id="lh" added="2004-11-01">
     <name>Langston Hughes</name>
     <address>
       <street>10 Bridge Tunnel</street>
       <city>Harlem</city>
       <province>NY</province>
     </address>
   </label>
   <label id="co" added="2004-11-15">
     <name>Christopher Okigbo</name>
     <address>
       <street>7 Heaven's Gate</street>
       <city>Idoto</city>
       <province>Anambra</province>
     </address>
   </label>
 </labels>

- makeitmorehuman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Craver · Accepted Answer

这是区分大小写的，使用"Table"就像这样：

$(xml).find("Table").each(function() {
  var stateName = $(this).find("StateLongName").text();
  var stateCode = $(this).find("StateShortName").text();
});

更新：抱歉，这个有点令人困惑，请不要使用<table>，它将其视为html并创建一个<tbody>，从那里开始事情变得更加奇怪 :) 如果您将其更改为其他任何内容，它都将正常工作，下面是将其更改为<tabl>的示例：http://jsfiddle.net/Yvetc/ 以下是完整的裸测试页面：

<html>
  <head>    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    var xml="<NewDataSet><Tabl><stateLongName>Alabama</stateLongName><stateShortName>AL</StateShortName></Tabl><Tabl><StateLongName>Alaska</StateLongName><StateShortName>AK</StateShortName></Tabl></NewDataSet>";
    $(xml).find("Tabl").each(function() {
      var stateName = $(this).find("StateLongName").text();
      var stateCode = $(this).find("StateShortName").text();
      alert("State: " + stateName + " Code: " + stateCode);
    });
    </script>
  </head>
  <body>
  </body>
</html>