这是使用jQuery解析XML的错误吗？

OK I'll try to explain this as simple as possible;

好的,我会尽量解释这个问题;

I'm trying to parse XML that I get through web service, using jQuery. All is doing as it should, until I've noticed that for the love of God I can't parse a node that is named "image". long story short (and 2 hours later) I've noticed, that the problem is in the TAG NAME. Obviously, "image" is a reserved word or something like that???

我正在尝试使用jQuery解析通过Web服务获得的XML。一切都在按照自己的意愿行事,直到我注意到为了上帝的爱,我无法解析一个名为“image”的节点。长话短说(2小时后)我注意到,问题出在TAG NAME上。显然,“图像”是一个保留字或类似的东西???

Here's a demonstration; firstly, I simulated xml, that has "image" node and won't display any results. Secondly, I simulated the SAME xml, the SAME parsing, I just renamed "image" to "image1" and it WORKS. See the example here: http://jsbin.com/evinah/1/edit

这是一个示范;首先,我模拟了xml,它有“图像”节点,不会显示任何结果。其次,我模拟了SAME xml,SAME解析,我刚刚将“image”重命名为“image1”并且它工作。请参阅此处的示例:http://jsbin.com/evinah/1/edit

So, obviously I can't change the web service, it's not in my domain. How do I get the "image" value, using jQuery?

所以,显然我无法更改Web服务,它不在我的域中。如何使用jQuery获取“图像”值?

Thanks for your responses.

谢谢你的回复。

3 个解决方案

#1

You should use $.parseXML if you are handling a string, this will return a valid valid XML document that can be used with jQuery.

如果要处理字符串,则应使用$ .parseXML,这将返回可与jQuery一起使用的有效有效XML文档。

$($.parseXML(xml)).find('item').each(function(i, e){
  alert($(e).children('image').text());
});

(See it here.)

(见这里。)

If you are using AJAX then you should set the dataType option to xml.

如果您使用的是AJAX,则应将dataType选项设置为xml。

---

The main reason why $(xml) partially works without using $.parseXML except for the <image>, it is because <image> elements are transliterated to <img> elements during the DOM construction. On top of it, <img> is an empty element and won't contain any children text elements which messes up the XML structure.

$(xml)部分工作的主要原因是除了之外没有使用$ .parseXML,这是因为在DOM构造期间元素被音译为元素。除此之外,是一个空元素,不会包含任何混淆XML结构的子文本元素。

For further information about the <img> and <image> historical usage please refer to <img> vs <image> tag in HTML.

有关和历史用法的更多信息,请参阅HTML中的 vs 标记。

#2

How to solve the problem is already mentioned in other answers, but I thought it is important to explain what's "wrong" with image tags.

在其他答案中已经提到了如何解决这个问题,但我认为解释图像标签的“错误”很重要。

When you pass the XML string to jQuery, it will use the browser's native DOM methods to parse the XML. Those DOM methods are mainly for parsing and processing HTML though.

当您将XML字符串传递给jQuery时,它将使用浏览器的本机DOM方法来解析XML。这些DOM方法主要用于解析和处理HTML。

Lets see what happens when you create a root element:

让我们看看创建根元素时会发生什么:

> var e = document.createElement('root');
  <root></root>

console.log(e) lists a bunch of properties, but most importantly, this elements inherits from HTMLUnknownElement, which makes sense.

console.log(e)列出了一堆属性,但最重要的是,这些元素继承自HTMLUnknownElement,这是有道理的。

Now lets create an image element:

现在让我们创建一个图像元素:

> var e = document.createElement('image');
  <img>

Uh? Where is <image></image>? Turns out that image is an alias for img. The new element inherits from HTMLImageElement.

呃? 在哪里?事实证明,图像是img的别名。新元素继承自HTMLImageElement。

You might think now that you could just do .children('img').text(), but this won't work since img elements cannot have descendants. The resulting structure that the browser produces is:

你现在可能会认为你可以做.children('img')。text(),但这不起作用,因为img元素不能有后代。浏览器生成的结果是:

<root>
    <item>
        <img>
        image link
    </item>
    <item>
        <img>
        image link2
    </item>
</root>

The text nodes are siblings of the img elements, not descendants.

文本节点是img元素的兄弟,而不是后代。

#3

The $ function is not meant to be used for parsing XML. You have to use $.parseXML, and then wrap this in a jQuery object: $($.parseXML(...)). In fact, for HTML there is also a dedicated function $.parseHTML. The $ function called with a string should be used either with a selector, or a simple "<tag>" string.

$函数不用于解析XML。你必须使用$ .parseXML,然后将它包装在一个jQuery对象中:$($。parseXML(...))。事实上,对于HTML,还有一个专用函数$ .parseHTML。使用字符串调用的$函数应该与选择器或简单的“ ”字符串一起使用。