如何使用jquery将.xml数据提取到html中？

I am trying to generate the thumbnail by fetching the xml data and for now I am only fetching image url from xml file and displaying it in thumbnail.

我试图通过获取xml数据来生成缩略图，现在我只从xml文件中获取图像URL并将其显示在缩略图中。

But unable to do the operation. Check the code and correct me.

但无法做手术。检查代码并纠正我。

<!--portfolio.xml>
<? xml version="1.0" encoding="utf-8" ?> 
<portfolio>
  <thumbnail title="POS" imageurl="img/pos.jpg">
    <type>Windows</type>
    <client> New zealand </client>
    <duration> 1 year </duration>
    <description> POS loream ipsum pos loream ipsum </description>
</thumbnail>

<thumbnail title="Milk Dairy" imageurl="img/milk.jpg">
    <type>Android</type>
    <client> Bangalore milk corp </client>
    <duration> 6 months </duration>
    <description> Milk Loream Ipsum  Ipsum Milk Loream Ipsum  </description>
</thumbnail>
</portfolio>
<!-- index.html>
<div class="row" id="thumb">

</div>
<script>
   //for hosting in server
    $.ajax({
            type:"GET",
            url:"portfolio.xml",
            dataType:"xml",
            success:function(xml)
            {
                var xmlDoc=$.parseXML(xml);
                $(xmlDoc).find('thumbnail').each(function()
                {
                    var $thumbnail=$(this);
                    var imageurl=$thumbnail.attr('imageurl');
                    var thumb=$('<div class="col-xs-6 col-md-3"> </div>');
                    var ref = $('<a href="#" class="thumbnail"></a>').appendTo(thumb);
                    var img = $('<img src="'+imageurl+'" alt="image">').appendTo(ref);
                    $(img).appendTo("#thumb");
                });
            }

        });
//running locally in my pc
/*$.get('portfolio.xml', function(d){
                    $(d).find('thumbnail').each(function()
                    {
                        var $thumbnail=$(this);
                        var imageurl=$thumbnail.attr('imageurl');
                        var thumb=$('<div class="col-xs-6 col-md-3"> </div>');
                        //var thumb = '<div class="col-xs-6 col-md-3"> </div>';
                        var ref = $('<a href="#" class="thumbnail"> </a>').appendTo(thumb);
                        var img= $('<img src="'+imageurl+'" alt="image">').appendTo(ref);
                        //var inner=$($(ref)).append($(img));
                        //var outer=$($(thumb)).append($(inner));
                        $(img).appendTo("#thum");
                    });
                });*/
</script>

1 个解决方案

#1

remove space between "<?" and "xml" in first line of portfolio.xml replace your first line by 

    <?xml version="1.0" encoding="utf-8" ?> 

and remove parse xml from ajax because you are already getting xml type data

并从ajax中删除解析xml，因为您已经获取了xml类型数据

$.ajax({
            type:"GET",
            url:"portfolio.xml",
            dataType:"xml",
            success:function(xml)
            {

                $(xml).find('thumbnail').each(function()
                {
                    var $thumbnail=$(this);
                    var imageurl=$thumbnail.attr('imageurl');
                    var thumb=$('<div class="col-xs-6 col-md-3"> </div>');
                    var ref = $('<a href="#" class="thumbnail"></a>').appendTo(thumb);
                    var img = $('<img src="'+imageurl+'" alt="image">').appendTo(ref);
                    $(img).appendTo("#thumb");
                });
            }

        });