jQuery .find() 在 IE 中不返回数据，但在 Firefox 和 Chrome 中返回

IT技术 javascript jquery xml
2021-01-30 17:04:52

我通过为他做一些网络工作来帮助他。他需要一种简单的方法来更改他网站上的几段文字。我决定提供一个包含消息的 XML 文件，而不是让他编辑 HTML，我使用 jQuery 将它们从文件中拉出并将它们插入到页面中。

它工作得很好...在 Firefox 和 Chrome 中，在 IE7 中不是那么好。我希望你们中的一位能告诉我原因。我做了一个公平但谷歌搜索但找不到我要找的东西。

这是 XML：

<?xml version="1.0" encoding="utf-8" ?>
<messages>
  <message type="HeaderMessage">
    This message is put up in the header area.
  </message>
  <message type="FooterMessage">
    This message is put in the lower left cell.
  </message>
</messages>

这是我的 jQuery 调用：

<script type="text/javascript">
  $(document).ready(function() {
    $.get('messages.xml', function(d) {
      //I have confirmed that it gets to here in IE
      //and it has the xml loaded.
      //alert(d); gives me a message box with the xml text in it
      //alert($(d).find('message')); gives me "[object Object]"
      //alert($(d).find('message')[0]); gives me "undefined"
      //alert($(d).find('message').Length); gives me "undefined"
      $(d).find('message').each(function() {
        //But it never gets to here in IE
        var $msg = $(this);
        var type = $msg.attr("type");
        var message = $msg.text();
        switch (type) {
        case "HeaderMessage":
          $("#HeaderMessageDiv").html(message);
          break;
        case "FooterMessage":
          $("#footermessagecell").html(message);
          break;
          default:
        }
      });
    });
  });
</script>

我需要在 IE 中做一些不同的事情吗？基于带有 [object Object] 的消息框，我假设 .find 在 IE 中工作，但由于我无法使用 [0] 索引到数组或检查它的 Length 我猜这意味着 .find 不是返回任何结果。有什么理由可以在 Firefox 和 Chrome 中完美运行但在 IE 中失败？

我是 jQuery 的新手，所以我希望我没有做过一些愚蠢的事情。上面的代码是从论坛中删除的，并根据我的需要进行了修改。由于 jQuery 是跨平台的，我想我不必处理这个烂摊子。

编辑：我发现如果我在 Visual Studio 2008 中加载页面并运行它，那么它将在 IE 中工作。所以结果证明它在通过开发 Web 服务器运行时总是有效的。现在我在想 IE 只是不喜欢在从我的本地驱动器加载的 XML 中执行 .find ，所以也许当它在实际的 Web 服务器上时它会正常工作。

我已经确认从 Web 服务器浏览时它可以正常工作。一定是 IE 的一个特性。我猜这是因为 web 服务器为 xml 数据文件传输设置了 mime 类型，没有那个 IE 不能正确解析 xml。

6个回答

由于 IE 的问题是它的 xml 解析器阻塞了没有使用正确的“text/xml”标头传递的 xml 文件，因此您可以在Ajax 完成事件中包含一些代码：

    完成：功能（xhr，状态）
    {
      alert( "完成。你得到：\n\n" + xhr.responseText ) ;
      if( 状态 == '解析器错误' )
      {
        alert( "有一个 PARSERERROR。幸运的是，我们知道如何解决这个问题。\n\n" +
               "完整的服务器响应文本是" + xhr.responseText);

        xmlDoc = 空；

        // 从 responseText 字符串创建 xml 文档。
        // 这使用了w3schools方法。
        //另见
        如果（窗口。DOMParser）
        {
          解析器=新的 DOMParser();
          xmlDoc=parser.parseFromString(xhr.responseText,"text/xml") ;
        }
        else // Internet Explorer
        {
          xmlDoc=new ActiveXObject("Microsoft.XMLDOM") ;
          xmlDoc.async = "false" ;
          xmlDoc.loadXML( xhr.responseText ) ;
        }

        $( '#response' ).append( '<p>complete event/xmlDoc: ' + xmlDoc + '</p>' ) ;
        $( '#response' ).append( '<p>完成事件/状态：' + status + '</p>' ) ;

        processXMLDoc( xmlDoc ) ;
      }
    },

这是一个更完整的例子

<!DOCTYPE html>
<html>
<头>
<title>使用 jQuery 读取 XML</title>
<样式>
＃回复
{
  边框：纯 1px 黑色；
  填充：5px；
}
</style>
<script src="jquery-1.3.2.min.js"></script>
<脚本>
函数 processXMLDoc( xmlDoc )
{
  var Heading = $(xmlDoc).find('heading').text();
  $( '#response' ).append( '<h1>' + 标题 + '</h1>' ) ;

  var bodyText = $(xmlDoc).find('body').text();
  $( '#response' ).append( '<p>' + bodyText + '</p>' ) ;
}
$(document).ready(function()
{
  jQuery.ajax({

    类型：“获取”，

    url: "a.xml", // ! 注意同样的
    //原点类型问题

    dataType: "xml", // 'xml' 通过浏览器的 xml 解析器传递

    成功：函数（xmlDoc，状态）
    {
      // SUCCESS EVENT 表示xml文档
      // 从服务器下来并成功解析
      // 使用浏览器自己的 xml 解析上限。

      processXMLDoc( xmlDoc );

      // 当 IE 变得非常沮丧时
      // 文档的 MIME 类型
      // 传递下来的不是 text/xml。

      // 如果您缺少 text/xml 标题
      // 显然 xml 解析失败，
      // 而在 IE 中，您根本无法执行此函数。

    },
    完成：功能（xhr，状态）
    {
      alert( "完成。你得到：\n\n" + xhr.responseText ) ;
      if( 状态 == '解析器错误' )
      {
        alert( "有一个 PARSERERROR。幸运的是，我们知道如何解决这个问题。\n\n" +
               "完整的服务器响应文本是" + xhr.responseText);

        xmlDoc = 空；

        // 从 responseText 字符串创建 xml 文档。
        // 这使用了w3schools方法。
        //另见
        如果（窗口。DOMParser）
        {
          解析器=新的 DOMParser();
          xmlDoc=parser.parseFromString(xhr.responseText,"text/xml") ;
        }
        else // Internet Explorer
        {
          xmlDoc=new ActiveXObject("Microsoft.XMLDOM") ;
          xmlDoc.async = "false" ;
          xmlDoc.loadXML( xhr.responseText ) ;
        }

        $( '#response' ).append( '<p>complete event/xmlDoc: ' + xmlDoc + '</p>' ) ;
        $( '#response' ).append( '<p>完成事件/状态：' + status + '</p>' ) ;

        processXMLDoc( xmlDoc ) ;
      }
    },
    错误：函数（xhr，状态，错误）
    {
      警报（'错误：'+状态）;
      警报（xhr.responseText）；
    }
  });
});
</脚本>
</头>
<身体>
  <div>
    <h1><a href="http://think2loud.com/reading-xml-with-jquery/">使用 jQuery 读取 XML</a></h1>
    <p>
      <a href="http://docs.jquery.com/Ajax/jQuery.ajax#options">#1 jQuery.ajax 参考</a>
    </p>

  </div>

  <p>服务器说：</p>
  <pre id="响应">

  </pre>
</正文>
</html>

a.xml 的内容

<?xml version="1.0"?>
<注意>
  <to>托夫</to>
  <from>贾妮</from>
  <heading>提醒</heading>
  <body>这个周末不要忘记我！</body>
</note>

它扩展了这个例子。

jquery 1.5 现在包含一个函数 parseXML 正在执行此操作api.jquery.com/jQuery.parseXML
2021-03-15 17:04:52

检查响应的内容类型。如果您将messages.xml 作为错误的mime 类型，Internet Explorer 不会将其解析为XML。

要检查内容类型，您需要访问 XMLHttpRequest 对象。正常的成功回调不会将其作为参数传递，因此您需要添加一个通用的 ajaxComplete 或 ajaxSuccess 事件处理程序。这些事件的第二个参数是 XMLHttpRequest 对象。您可以对其调用 getResponseHeader 方法以获取内容类型。

$(document).ajaxComplete(function(e, x) {
    alert(x.getResponseHeader("Content-Type"));
});

不幸的是，我知道在 Internet Explorer 中无法覆盖服务器发送的内容，因此如果错误，您需要更改服务器以发送内容类型的“文本/xml”。

某些浏览器有一个overrideMimeType方法，您可以先调用send它来强制它使用“text/xml”，但据我所知，Internet Explorer 不支持该方法。

这是一个疯狂的好答案。jQuery 不能正确处理它是一个真正的缺点
2021-03-24 17:04:52
对于任何新手，请务必查看下面 bobobobo 的答案，以获取一些参考资料和一个非常好的解决方法。
2021-03-30 17:04:52
我如何在上面的电话中检查这一点？我将如何在 jquery 中将其设置为正确的内容？
2021-04-06 17:04:52

dataType :"xml" 没有解决 IE8 中的这个问题，而是通过一个“TypeError”预期。

Quick & Dirty 修复是将 xml 响应包装在 html 元素中，例如 div：

$("<div>" + xml + "</div>").find("something");

（适用于所有浏览器）

您可能会发现，如果将数据类型传递到 get 调用中，它可能会正确解析为 XML。IE 的怪癖可能会阻止 jQuery 将其自动检测为 XML，从而导致将错误的数据类型传递给回调函数。

<script type="text/javascript">
      $(document).ready(function() {
        $.get('messages.xml', function(d) {
          //I have confirmed that it gets to here in IE
          //and it has the xml loaded.
          //alert(d); gives me a message box with the xml text in it
          //alert($(d).find('message')); gives me "[object Object]"
          //alert($(d).find('message')[0]); gives me "undefined"
          //alert($(d).find('message').Length); gives me "undefined"
          $(d).find('message').each(function() {
            //But it never gets to here in IE
            var $msg = $(this);
            var type = $msg.attr("type");
            var message = $msg.text();
            switch (type) {
            case "HeaderMessage":
              $("#HeaderMessageDiv").html(message);
              break;
            case "FooterMessage":
              $("#footermessagecell").html(message);
              break;
              default:
            }
          });
        }, "xml");
      });
</script>

编辑：

我实际上刚刚经历过 .find() 不适用于任何浏览器中的项目，但我能够使用 .filter() 代替。我不得不求助于这个很烦人，但如果它有效......

$(d).filter('message').each(......);
添加“xml”不起作用，过滤器也不起作用。在这一点上，我想我必须把它归结为 IE 中的一个特性。只要它在服务器上工作，我就可以忍受。
2021-04-13 17:04:52

我也有同样的问题，但我已经使用下面的代码修复了 IE jQuery XML .find() 问题。

注意：使用 .text() 而不是 .html()。

jQuery.ajax({
 type: "GET",
        url: "textxml.php",
        success: function(msg){             
            data = parseXml(msg);
            //alert(data);
            var final_price = jQuery(data).find("price1").text();
            alert(final_price); 
            }
    });     

function parseXml(xml) {
     if (jQuery.browser.msie) {
        var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
        xmlDoc.loadXML(xml);
        xml = xmlDoc;
    }   
    return xml;
}
其它你可能感兴趣的问题
上一篇如何在每个循环的 Meteor 模板中获取数组的索引？ 下一篇在 JavaScript 中分区