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

Question

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

我通过为他做一些网络工作帮助了一个朋友.他需要的部分内容是在他的网站上更改几段文字的简单方法.我没有让他编辑HTML,而是决定在其中提供带有消息的XML文件,并使用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>

Run Code Online (Sandbox Code Playgroud)

这是我的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>

Run Code Online (Sandbox Code Playgroud)

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

我是jQuery的新手,所以我希望我不仅仅做了一些愚蠢的事情.上面的代码被从论坛中删除,并根据我的需要进行了修改.由于jQuery是跨平台的,我认为我不必处理这个混乱.

编辑:我发现,如果我在Visual Studio 2008中加载页面并运行它,那么它将在IE中工作.事实证明,它在运行开发Web服务器时始终有效.现在我认为IE不喜欢在我的本地驱动器上加载的XML中执行.find所以也许当它在实际的Web服务器上时它可以正常工作.

我已经确认从Web服务器浏览时它工作正常.必须是IE的特色.我猜这是因为Web服务器为xml数据文件传输设置了mime类型,而没有IE不能正确解析xml.

Answer 1

bob*_*obo 19

由于IE的问题是它的xml解析器在xml文件上使用正确的"text/xml"标头传递下来,所以你可以在Ajax完成事件中包含一些代码:

    complete: function( xhr, status )
    {
      alert( "COMPLETE.  You got:\n\n" + xhr.responseText ) ;
      if( status == 'parsererror' )
      {
        alert( "There was a PARSERERROR.  Luckily, we know how to fix that.\n\n" +
               "The complete server response text was " + xhr.responseText ) ;

        xmlDoc = null;

        // Create the xml document from the responseText string.
        // This uses the w3schools method.
        // see also
        if( window.DOMParser )
        {
          parser=new 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>complete event/status: ' + status + '</p>' ) ;

        processXMLDoc( xmlDoc ) ;
      }
    },

这是一个更完整的例子

<!DOCTYPE html>
<html>
<head>
<title>Reading XML with jQuery</title>
<style>
#response
{
  border: solid 1px black;
  padding: 5px;
}
</style>
<script src="jquery-1.3.2.min.js"></script>
<script>
function processXMLDoc( xmlDoc )
{
  var heading = $(xmlDoc).find('heading').text() ;
  $( '#response' ).append( '<h1>' + heading + '</h1>' ) ;

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

    type: "GET",

    url: "a.xml",  // ! watch out for same
    // origin type problems

    dataType: "xml", // 'xml' passes it through the browser's xml parser

    success: function( xmlDoc, status )
    {
      // The SUCCESS EVENT means that the xml document
      // came down from the server AND got parsed successfully
      // using the browser's own xml parsing caps.

      processXMLDoc( xmlDoc );

      // IE gets very upset when
      // the mime-type of the document that
      // gets passed down isn't text/xml.

      // If you are missing the text/xml header
      // apparently the xml parse fails,
      // and in IE you don't get to execute this function AT ALL.

    },
    complete: function( xhr, status )
    {
      alert( "COMPLETE.  You got:\n\n" + xhr.responseText ) ;
      if( status == 'parsererror' )
      {
        alert( "There was a PARSERERROR.  Luckily, we know how to fix that.\n\n" +
               "The complete server response text was " + xhr.responseText ) ;

        xmlDoc = null;

        // Create the xml document from the responseText string.
        // This uses the w3schools method.
        // see also
        if( window.DOMParser )
        {
          parser=new 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>complete event/status: ' + status + '</p>' ) ;

        processXMLDoc( xmlDoc ) ;
      }
    },
    error: function( xhr, status, error )
    {
      alert( 'ERROR: ' + status ) ;
      alert( xhr.responseText ) ;
    }
  });
});
</script>
</head>
<body>
  <div>
    <h1><a href="http://think2loud.com/reading-xml-with-jquery/">Reading XML with jQuery</a></h1>
    <p>
      <a href="http://docs.jquery.com/Ajax/jQuery.ajax#options">#1 jQuery.ajax ref</a>
    </p>

  </div>

  <p>Server says:</p>
  <pre id="response">

  </pre>
</body>
</html>

a.xml的内容

<?xml version="1.0"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

它扩展了这个例子.

jquery 1.5现在包含了一个函数parseXML,它正在执行这个http://api.jquery.com/jQuery.parseXML/ (5认同)

Answer 2

Mat*_*ley 12

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

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

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

Run Code Online (Sandbox Code Playgroud)

不幸的是,我无法在Internet Explorer中知道覆盖服务器发送的内容,因此如果错误则需要更改服务器以发送内容类型的"text/xml".

有些浏览器有一个overrideMimeType方法可以在之前调用send它来强制它使用"text/xml",但据我所知,Internet Explorer不支持这种方法.

Answer 3

小智 6

dataType:"xml"不能解决IE8中的这个问题,而是通过"TypeError"预测.

快速和肮脏的修复,是将xml响应包装在html元素中,如div:

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

Run Code Online (Sandbox Code Playgroud)

(适用于所有浏览器)

Answer 4

MJJ*_*mes 5

您可能会发现,如果将数据类型传递给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>

Run Code Online (Sandbox Code Playgroud)

编辑:

我实际上只是经历过.find()不能在任何浏览器中为一个项目工作,但我能够使用.filter()代替.令人讨厌的是我不得不诉诸于此,但如果它有效......

$(d).filter('message').each(......);

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，8 月前
查看次数：	45302 次
最近记录：	10 年，1 月前