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 に答える