Question

我正在尝试使用XML文件中的文本打印出一系列jpg图像。我已经剪切并粘贴了下面的代码和xml文件。的 HTML / JavaScript的：

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <style>
 #header{

 text-align:center;

 }

 #middle{

 text-align:center;

 }

 </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
//function getList () {
$(document).ready(function() {
    //$("p").click(function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            xmlDoc = xhr.responseXML;
            var team =
                xmlDoc.getElementsByTagName("fixtures");
            var html = "";
            for (i = 0; i < team.length; i++) {
                html += 
                  //  xmlDoc.getElementsByTagName("image1")[i].childNodes[0].nodeValue + "<br>" +    
                    xmlDoc.getElementsByTagName("match")[i].childNodes[0].nodeValue + "<br>" +
                   xmlDoc.getElementsByTagName("image2")[i].childNodes[0].nodeValue + "<br>" +//
                    xmlDoc.getElementsByTagName("location")[i] .childNodes[0].nodeValue + "<br>" + 
                    xmlDoc.getElementsByTagName("date")[i] .childNodes[0].nodeValue + "<br><br>"; 
            }
            document.getElementById("matchlist").innerHTML = html;

        }
    }
    xhr.open("GET", "fixtures.xml", true);
    xhr.send();

});
</script>

</head>
<body>
<div id = "header"><h1>UEFA European Championship 2016 Final Tournament - Group Stage</h1></div>
<div id = "middle"  >

    <ul id="matchlist" ></ul>
</div>
</body>
</html>

XML（fixtures.xml）：

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xpsport2.xsl"?>
<Fixtures>
<fixtures field="Football">
    <image1 src="http://img.uefa.com/imgml/flags/50x50/BEL.png" alt="Belgium"></image1>
    <image2 src="http://img.uefa.com/imgml/flags/50x50/IRL.png" alt="Republic of Ireland"></image2>
            <match>Belgium v Rep. of Ireland</match>
            <location>Stade Bollaert-Delelis, Lens</location>
            <date>Saturday, June 11</date>
      </fixtures>
      <fixtures field="Football">
          <image1 src="images\ireland.jpg"  ></image1>
           <image2 src="images\sweden.jpg"></image2>
            <match>Rep. of Ireland v Sweden</match>
            <location>Stade de France, Paris</location>
            <date> Monday.13 june 2016</date>
      </fixtures>
      <fixtures field="Football">
       <image1 src="images\belgium.jpg" />
       <image2 src="images\sweden.jpg"/>   
       <match> Sweden v Belgium</match>
            <location>Stade Pierre Mauroy, Lille</location>
            <date>Tuesday, June 14 </date>
      </fixtures>

      <fixtures field="Football">
          <image1 src="images\italy.jpg"/>  
          <image2 src="images\sweden.jpg"/>
       <match>Italy v Sweden</match>
            <location>Stade de Bordeaux,Bordeaux</location>
            <date> Monday,18  June </date>
      </fixtures>
       <fixtures field="Football">
           <image1  src="images\italy.jpg"  />
           <image2 src="images\ireland.jpg"/>
       <match>Italy v Rep. of Ireland</match>
            <location>Grand Stade Lille Métropole, Lille</location>
            <date>Friday, 22 June </date>
      </fixtures>
</Fixtures>

Answer 1

由于您使用jQuery，因此您可以通过这种方式轻松解析xml：

var response = '<?xml version="1.0" encoding="iso-8859-1"?>\
    <?xml-stylesheet type="text/xsl" href="xpsport2.xsl"?>\
        <Fixtures>\
            <fixtures field="Football">\
                <image1 src="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.1.0/flags/1x1/be.svg" alt="Belgium"></image1>\
                <image2 src="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.1.0/flags/1x1/ie.svg" alt="Republic of Ireland"></image2>\
                <match>Belgium v Rep. of Ireland</match>\
                <location>Stade Bollaert-Delelis, Lens</location>\
                <date>Saturday, June 11</date>\
            </fixtures>\
            <fixtures field="Football">\
                <image1 src="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.1.0/flags/1x1/ie.svg"></image1>\
                <image2 src="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.1.0/flags/1x1/se.svg"></image2>\
                <match>Rep. of Ireland v Sweden</match>\
                <location>Stade de France, Paris</location>\
                <date> Monday.13 june 2016</date>\
            </fixtures>\
            <fixtures field="Football">\
                <image1 src="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.1.0/flags/1x1/be.svg" />\
                <image2 src="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.1.0/flags/1x1/se.svg" />\
                <match> Sweden v Belgium</match>\
                <location>Stade Pierre Mauroy, Lille</location>\
                <date>Tuesday, June 14 </date>\
            </fixtures>\
        </Fixtures>\
';
/* After you get the above text */
var xml = $(response);
xml.find('fixtures').each(function(i){
	var thisFixture = $(this);
	var image1 = thisFixture.find('image1');
	var image2 = thisFixture.find('image2');
	var match = thisFixture.find('match').text();
	var location = thisFixture.find('location').text();
	var date = thisFixture.find('date').text();
	$('div').append(
		'<img src="' + image1.attr('src') + '" />', 
		'<img src="' + image2.attr('src') + '" />', 
		match, 
		location, 
		date, 
		'<br />'
	);
});

img {
	width: 20px;
	height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>We get:</h3>
<div></div>

请注意，为了找到<Fixture>的根元素，您必须将响应包装在容器元素中，例如：

var xml = $('<div>'+response+'</div>');

在这种情况下，因为

jQuery将字符串解析为HTML DOM节点，这是不区分大小写的归一化为小写。

console.log( xml.find('fixtures').length );
/* OUTPUT 4! */

无法打印出从XML文件引用的JPG图像

1 个答案: