遇到Javascript和XML问题

时间:2016-09-23 16:47:15

标签: javascript jquery html xml

我试图在我的网站上运行此javascript,但我似乎无法加载它。我按照下面的教程链接,但它似乎没有正确加载。谁能帮忙。对不起,我刚开始使用XML。

我也试图在本地运行,而不是在服务器上运行。

视频链接:https://www.youtube.com/watch?v=ppzYGd0wi_c

<!DOCTYPE html>

<html>
<head>


        <title>XML Testing</title>


        <meta name=viewport content="width=device-width, initial-scale=1">  




        <!-- CSS Style Information -->
<!--        <link rel="stylesheet" href="files/style.css" media="all">-->



        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>


        <script type="text/javascript">

            $(document).ready(function(){
               $.ajax({
                   type: "GET",
                   url: "data.xml",
                   dataType: "xml",
                   success: xmlParser
               });
            });

            function xmlParser(xml){
                $(xml).find("painting").each(function){
                   $("#container").append('<div class="painting"><img src="images/' + $(this).find("image").text() + '" width="200" height="225" alt="' + $(this).find("title").text() + '" /><br/><div class="title">' + $(this).find("title").text() + '<br/>$' + $(this).find("price").text() + '</div></div>'); 
                });
            }


        </script>


    </head>
    <body id="body">

        <div id="container">

        </div>


    </body>
</html>

分隔名为data.xml的xml文件

<?xml version="1.0"?>


<paintings>
    <painting>
        <title>Boardwalk 5</title>
        <artist>Arnie Palmer</artist>
        <image>test.png</image>
        <price>850</price>
    </painting>
    <painting>
        <title>Boardwalk 5</title>
        <artist>Arnie Palmer</artist>
        <image>test.png</image>
        <price>850</price>
    </painting>
</paintings>

1 个答案:

答案 0 :(得分:1)

JS语法错误,应该是:

$(xml).find("painting").each(function(){
   $("#container").append('<div class="painting"><img src="images/' + $(this).find("image").text() + '" width="200" height="225" alt="' + $(this).find("title").text() + '" /><br/><div class="title">' + $(this).find("title").text() + '<br/>$' + $(this).find("price").text() + '</div></div>'); 
});