3

我一直在使用 jQuery，但最近在使用 jQuery 的.html()方法时遇到了 IE7 和 IE8 的问题。如果我收到来自 AJAX 调用的 XML 响应，并尝试获取该响应的特定片段的 innerHTML，我得到一个未定义的。

现在这可以在 Firefox、Chrome 和 IE 9 上完美运行。

请看下面的片段：

 var data = 
     "<reponse_data>" + 
     "  <chart_data>" + 
     "      <chart caption='' yAxisName='Unidades' alternateVGridColor='AFD8F8' toolTipBorderColor='114B78' toolTipBgColor='E7EFF6' plotBorderDashed='0' plotBorderDashLen='2' plotBorderDashGap='2'  useRoundEdges='1' showBorder='1' bgColor='FFFFFF,FFFFFF' formatNumberScale='0' paletteColors='B9E1FF,FEC618,94C20A,CD7239,0A9797'>" + 
     "          <set label='Inventario' value='1203' />" + 
     "          <set label='Recibidas' value='3423' />" + 
     "          <set label='Subastadas' value='3661' />" + 
     "          <set label='Entregadas' value='3648'  />" + 
     "          <set label='Balance' value='978'  />" + 
     "      </chart>" + 
     "  </chart_data>" + 
     "  <misc>" + 
     "      <initialInvCell>1,203</initialInvCell>" + 
     "      <receivedUnitsCell>3,423</receivedUnitsCell>" + 
     "      <auctionedUnitsCell>3,661</auctionedUnitsCell>" + 
     "      <deliveredUnitsCell>3,648</deliveredUnitsCell>" + 
     "      <finalInventoryCell>978</finalInventoryCell>" + 
     "  </misc>" + 
     "</reponse_data>";

 console.log('ChartData: ' + $(data).find('chart_data').html());
4

3 回答 3

3

$(data)还不是 HTML。它是一个字符串，因此它没有任何 jQuery 使用的与之关联的 DOM。在尝试将其与 jQuery 一起使用之前，您需要将其转储到 DOM 中。

由于您从某个地方将其作为字符串获取，因此最好的办法（性能和内存方面）可能是解析字符串并获取您想要的值。您可以使用正则表达式，也可以查找左括号和右括号的索引并获取两者之间的任何内容。

于 2012-11-28T17:50:15.800 回答
1

编辑：我已经更新了我的答案。请参阅此jsfiddle以查看它的工作...

注意这是使用 jquery 1.8.2

html:

<div id="maincontent">
    hello world
</div>​

js：

var data = 
 "<reponse_data>" + 
 "  <chart_data>" + 
 "      <chart caption='' yAxisName='Unidades' alternateVGridColor='AFD8F8' toolTipBorderColor='114B78' toolTipBgColor='E7EFF6' plotBorderDashed='0' plotBorderDashLen='2' plotBorderDashGap='2'  useRoundEdges='1' showBorder='1' bgColor='FFFFFF,FFFFFF' formatNumberScale='0' paletteColors='B9E1FF,FEC618,94C20A,CD7239,0A9797'>" + 
 "          <set label='Inventario' value='1203' />" + 
 "          <set label='Recibidas' value='3423' />" + 
 "          <set label='Subastadas' value='3661' />" + 
 "          <set label='Entregadas' value='3648'  />" + 
 "          <set label='Balance' value='978'  />" + 
 "      </chart>" + 
 "  </chart_data>" + 
 "  <misc>" + 
 "      <initialInvCell>1,203</initialInvCell>" + 
 "      <receivedUnitsCell>3,423</receivedUnitsCell>" + 
 "      <auctionedUnitsCell>3,661</auctionedUnitsCell>" + 
 "      <deliveredUnitsCell>3,648</deliveredUnitsCell>" + 
 "      <finalInventoryCell>978</finalInventoryCell>" + 
 "  </misc>" + 
"</reponse_data>";

var a = $("<div/>",{
    html: data,
    id: "darth",
    style: "display:none;"
}).appendTo($("#maincontent"));

var b = a.find("chart_data").html();

alert(b);

老答案：

我认为这不会起作用，因为那时它并不是真正的 html。它是一串文本，直到它被注入到dom中......

如果您想使用 .html() 之类的方法，我建议先将其转储到 dom 中。

就像是...

var data = "data" + "more data..." + "more data"...


var a = $("<div/>",{html: data, display: "none"}).appendTo($("body"));

然后...

var b = a.find("chart_data").html();

它不是很漂亮，但它应该可以工作......

于 2012-11-28T17:55:43.533 回答
0

嗨@teewuane 和@joshua，

谢谢你的帮助。通过执行以下操作，我能够成功实现我的目标：

http://jsfiddle.net/CcWfj/3/

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
       function ieParse () {
            //var xmlText = "<root><fruit color='red'></fruit></root>";
            var xmlText = "<reponse_data>" + 
                          "   <chart_data>" + 
                          "       <chart caption='' yAxisName='Unidades' alternateVGridColor='AFD8F8' toolTipBorderColor='114B78'     toolTipBgColor='E7EFF6' plotBorderDashed='0' plotBorderDashLen='2' plotBorderDashGap='2'  useRoundEdges='1' showBorder='1'     bgColor='FFFFFF,FFFFFF' formatNumberScale='0' paletteColors='B9E1FF,FEC618,94C20A,CD7239,0A9797'>" + 
                          "           <set label='Inventario' value='1203' />" + 
                          "           <set label='Recibidas' value='3423' />" + 
                          "           <set label='Subastadas' value='3661' />" + 
                          "           <set label='Entregadas' value='3648'  />" + 
                          "           <set label='Balance' value='978'  />" + 
                          "       </chart>" + 
                          "   </chart_data>" + 
                          "   <misc>" + 
                          "       <initialInvCell>1,203</initialInvCell>" + 
                          "       <receivedUnitsCell>3,423</receivedUnitsCell>" + 
                          "       <auctionedUnitsCell>3,661</auctionedUnitsCell>" + 
                          "       <deliveredUnitsCell>3,648</deliveredUnitsCell>" + 
                          "       <finalInventoryCell>978</finalInventoryCell>" + 
                          "   </misc>" + 
                          "</reponse_data>";

            var xmlDocument = XMLFromString(xmlText);
            var chartData = XMLToString(xmlDocument.childNodes[0].childNodes[0].childNodes[0]);
            var elementsData = XMLToString(xmlDocument.childNodes[0].childNodes[1]);

            alert(chartData);
            alert(elementsData);

        }

        function XMLToString(oXML) {
          if (window.ActiveXObject) {
            return oXML.xml;
          } else {
            return (new XMLSerializer()).serializeToString(oXML);
          }
        }

        function XMLFromString(sXML) {
          if (window.ActiveXObject) {
            var oXML = new ActiveXObject("Microsoft.XMLDOM");
            oXML.loadXML(sXML);
            return oXML;
          } else {
            return (new DOMParser()).parseFromString(sXML, "text/xml");
          }
        }


    </script>
</head>
<body>
    <button onclick="ieParse ()">IE Parse</button>
</body>

因此，对于 IE7 和 IE8，我基本上不得不放弃使用 jQuery 的 .find() 和 .html() 函数。

约书亚，我会把你的意见变成建议。

我使用了以下参考：http: //joncom.be/code/javascript-xml-conversion/

再次感谢，

于 2012-11-28T20:25:25.357 回答