如何在jQuery中通过DOM查询XML字符串

时间:2009-05-20 19:11:13

标签: jquery dom

我想取一个字符串并将其视为XML。然后我将能够通过jQuery.find与DOM进行查询。在Firefox中一切都运行良好,但我意识到这在IE中不起作用。

我这样做:

  var t = "<div><outer><inner>abc</inner><inner>def</inner></outer></div>";
  alert("[" + $(t).find("outer").html() + "]");

在Firefox 3中打印:

[<inner>abc</inner><inner>def</inner>]

在IE 7中打印:

[]

让这个跨浏览器工作的任何变通办法吗?

感谢。

8 个答案:

答案 0 :(得分:9)

有两种方法可以解决这个问题。

  1. 将XML字符串转换为DOM,使用此plugin对其进行解析或遵循此tutorial
  2. 使用此plugin将XML转换为JSON。

答案 1 :(得分:4)

是否可以将XML存储为JSON(我认为会是这样)?例如,在PHP中,您可以将XML转换为数组或对象,然后使用json_encode将其转换为JSON。然后你可以将它作为一个javascript变量回应出来:

在PHP中:

<?php
$xml = "<div><outer><inner>abc</inner><inner>def</inner></outer></div>";
$xml_object = simplexml_load_string(xml);
$json = json_encode($xml_object);
?>
<script language="javascript">
$(function() {
    // eval() is okay to use if you know where the JSON is 
    // coming from (and, of course, you do...) 
    var data = eval('<?php echo $json; ?>');
    $(document).data('myapp.data',data);
});
</script>

现在,无论何时需要访问该数据,您都可以这样做:

function some_function() {
    var data = $(document).data('myapp.data');
    $.each(data.div.outer,function() {
        // Would alert 'abc' then 'def'
        alert(this.inner);
    });
}

我希望所有这些都有意义。至少你不必再担心客户端上的XML了。当然,如果你绝对需要,我发现这对我来说过去很有用:

var xml = "<div><outer><inner>abc</inner><inner>def</inner></outer></div>";
var $xml = $('<div />').append(xml);
alert("[" + $xml.find("outer").html() + "]");

修改 我修改了我的代码以使用你提供的实际XML - 不知道我在哪里混合(必须从其他人的意外事件的答案中抓取代码片段)。你应该给我的第一个建议 - 它应该有效。

答案 2 :(得分:3)

将XML字符串放入Javascript变量:

var xmlString = $('<?xml version="1.0"?><Customers><Customer Name="Allan Border" Age="26" ContactNumber="004416165245" Address="Unit # 24 East London" City="London" Country="England"></Customer><Customer Name="Jennifer" Age="28" ContactNumber="004416165248" Address="Unit # 28 West London" City="London" Country="England"></Customer></Customers>');

现在,您可以通过遍历每个客户节点来解析XML:

$(xmlString).find("Customer").each(function () {
 var customerName = $(this).attr("Name");
 var age = $(this).attr("Age");
 var contactNumber = $(this).attr("ContactNumber");
 var address = $(this).attr("Address");
 var city = $(this).attr("City");
 var country = $(this).attr("Country");
 });

答案 3 :(得分:1)

首先,jQuery构造函数采用HTML而不是XML ......也就是说,您的XML可能有效 - 但它取决于许多依赖于浏览器的行为。此外,您可以通过将新创建的元素附加到页面上某个隐藏元素然后尝试查询它来获得更好的成功:

var xml = "<books><book><title>Title</title></book></books>";
$(xml).appendTo("#hidden");
alert($("#hidden books").length);

答案 4 :(得分:1)

在Javascript for Selenium中读取浏览器中的XML文件:

function loadXMLFromDOM2XMLString( xmlString, xmltag, currentChildNode ) { 
var nodes = currentChildNode.childNodes; 
var i = 0 ;
var node = nodes[i];
while ( i < nodes.length) {
   if (node.data == null) {xmltag = '<'+node.localName+'>';} else {xmltag = node.data;};
   xmlString = xmlString  + xmltag;
   xmlString = loadXMLFromDOM2XMLString( xmlString, xmltag, node  );   
   if (node.data == null) {xmltag = '<'+'/'+node.localName+'>';} else {xmltag = "";};
   xmlString = xmlString + xmltag;
   i++;
   node = nodes[i];
}
 return xmlString ;
} ;
var xmlString = "";
var xmltag = "";

var currentChildNode = window.document;

xmlString = loadXMLFromDOM2XMLString( xmlString, xmltag, currentChildNode );
xmlString;

答案 5 :(得分:0)

使用字符串xml,你需要使用.filter,因为它不想识别xml节点树。

在ie8中尝试this,调试器可见以获取控制台输出。

答案 6 :(得分:0)

那么不是将XML数据集存储在DOM中,而是将其转换为HTML表并使其不可见。这应该解决jQuery问题......至少是浏览器特定的问题。然后回到改进你的选择器的工作。

答案 7 :(得分:0)

已经有一段时间了,但我才意识到我忘了发布我是如何用你的想法解决问题的。

我需要一个完全客户端数据库(没有PHP)。

我创建了一个带有HTML注释的div,其中包含XML。我parsed the HTML comment with this然后我converted the XML to JSON with this

   var xmltext = $("#piecelist").comments();
   var json = $.xml2json(xmltext.html());

您可以在此处查看我的方法: http://wesculpt.net/art.html

也许我应该把这个方法变成一个jQuery插件。

感谢大家的帮助。