Question

假设我在html页面中有这个javascript代码

<script type="text/javascript">
$(document).ready(function(){ $('.info2').CreateBubblePopup({ position : 'left', align : 'center',
innerHtml: 'some text ',
innerHtmlStyle: { color:'#FFFFFF', 'text align':'center' },
themeName: 'all-black',
themePath: 'images/jquerybubblepopup-themes' }); }); 
</script>

我想让这个脚本从我所拥有的xml文件中获取“info2”和“some test”，其中我添加了一个名为＆lt; -INFOID-＆gt;的“info2”标签。还有一个名为“＆lt; -INFODATA-＆gt;”的“某些文字”的标签（没有 - ，只是添加了它们，因为标签消失了）所以我使用下面的代码连接xml并编写脚本

<script type="text/javascript">
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","scores.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<script type='text/javascript'>");
var x=xmlDoc.getElementsByTagName("GAME");
for (i=0;i<x.length;i++)
  { 
  document.write("$(document).ready(function(){ $('.");
  document.write(x[i].getElementsByTagName("INFOID")[0].childNodes[0].nodeValue);
  document.write("').CreateBubblePopup({ position : 'left', align : 'center',");
  document.write("innerHtml: '");
  document.write(x[i].getElementsByTagName("INFODATA")[0].childNodes[0].nodeValue);
  document.write("',");
  document.write("innerHtmlStyle: { color:'#FFFFFF', 'text-align':'center' },");
  document.write("themeName: 'all-black',");
  document.write("themePath: 'images/jquerybubblepopup-themes' }); });");

  }
document.write("</script>");
</script>

我不知道XML是否在Javascript中运行我只是试一试，但它没有用那么xml可以使用javascript吗？如果是，我的代码有什么问题？

我的scores.xml文件显示：

<SCORES>
<GAME>
<DATE>14.5.2012 12:05</DATE>
<TIME>FT</TIME>
<HOMETEAM>Team1</HOMETEAM>
<SCORE>4 - 0</SCORE>
<AWAYTEAM>Team2</AWAYTEAM>
<OTHER> </OTHER>
<INFO><![CDATA[<img class='info1' src='images/info.png' width='14px' height='14px' border='0' />]]></INFO>
<INFOID>info1</INFOID>
<INFODATA>FIRST BUBBLE</INFODATA>
</GAME>

<GAME>
<DATE>14.5.2012 12:05</DATE>
<TIME>FT</TIME>
<HOMETEAM>Team3</HOMETEAM>
<SCORE>2 - 0</SCORE>
<AWAYTEAM>Team4</AWAYTEAM>
<OTHER> </OTHER>
<INFO><![CDATA[<img class='info2' src='images/info.png' width='14px' height='14px' border='0' />]]></INFO>
<INFOID>info2</INFOID>
<INFODATA>SECOND BUBBLE</INFODATA>
</GAME>
</SCORES>

我在页面中使用的其他标签...... 最后2个标签用于配置此脚本，这是一个lil img的弹出气泡

Answer 1

查看jQuery的XML解析器：http://api.jquery.com/jQuery.parseXML/。

它还将为您进行AJAX检索，并且实际上可以立即处理XML：http://api.jquery.com/jQuery.get/

以下示例（相对未经测试）：

<script type="text/javascript">
$(document).ready( function ( ) {
    // Get the XML data from your file
    $.get('demo.xml', function( data ) {

        // Because we've given jQuery the XML datatype, we can jump straight to finding the element.    
        $(data).find('GAME').each( function ( ) {

            // The current object now holds a single "GAME" - find the elements we need
            var game_id = $(this).find('INFOID').text( );
            var game_info = $(this).find('INFODATA').text( );

            // Create the popup.
            $('.'+game_id).CreateBubblePopup({
                    position : 'left', align : 'center',
                    innerHtml: game_info,
                    innerHtmlStyle: { color:'#FFFFFF', 'text align':'center' },
                    themeName: 'all-black',
                    themePath: 'images/jquerybubblepopup-themes'
            });
        }); // end of each
    }, 'xml'); // The 'xml' tells jQuery to expect XML back from the request
});
</script>

在HTML页面上编写的JavaScript是否可以从XML获取信息？

1 个答案: