Javascript 使用jQuery（Ajax）将XML加载到HTML中_Javascript_Jquery_Html_Ajax_Xml

Javascript 使用jQuery（Ajax）将XML加载到HTML中

javascript jquery html ajax xml

Javascript 使用jQuery（Ajax）将XML加载到HTML中,javascript,jquery,html,ajax,xml,Javascript,Jquery,Html,Ajax,Xml,我尝试使用jQuery在网页中加载XML数据库（比如在主题中）我的数据库看起来像： <?xml version="1.0" encoding="UTF-8"?> <villes> <ville> <idville>14</idville> <nomville>Arles</nomville> <site>http://www.pays-arles.org/e-patrimoine/

我尝试使用jQuery在网页中加载XML数据库（比如在主题中）

我的数据库看起来像：

<?xml version="1.0" encoding="UTF-8"?>
 <villes>

 <ville>
  <idville>14</idville>
  <nomville>Arles</nomville>
  <site>http://www.pays-arles.org/e-patrimoine/communes/arles/</site>
  <patrimoine>
    <fiche>http://www.pays-arles.org/e-patrimoine/communes/arles/article/abbaye-de-montmajour</fiche>
    <identifiant>445</identifiant>
    <titre>Abbaye de Montmajour</titre>
    <description>blabla</description>
    <latitude>43.705856</latitude>
    <longitude>4.664383</longitude>
    <MOTS>
      <themes>Religion</themes>
      <categoriedelarchitecture>Architecture religieuse, funéraire et commémorative</categoriedelarchitecture>
      <typedarchitecture>Architecture religieuse</typedarchitecture>
      <appartenance>Monument historique classé</appartenance>
      <epoque>Moyen-Age</epoque>
      <stylearchitectural>Roman provençal</stylearchitectural>
      <datation>XIIe siècle</datation>
      <edifice>Bâtiment religieux</edifice>
      <propriete>Etat</propriete>
    </MOTS>
    <images>
      <image>http://www.pays-arles.org/e-patrimoine/IMG/jpg/montmajour.jpg</image>
      <image>http://www.pays-arles.org/e-patrimoine/IMG/jpg/montmajour-4.jpg</image>
      <image>http://www.pays-arles.org/e-patrimoine/IMG/jpg/montmajour-5.jpg</image>
      <image>http://www.pays-arles.org/e-patrimoine/IMG/jpg/montmajour-6.jpg</image>
    </images>
    </patrimoine>

    <patrimoine>
      ...
    </patrimoine>

    <patrimoine>
      ...
    </patrimoine>
  </ville>

  <ville>
    ...
  </villes>

  <ville>
    ...
  </villes>

</villes>


14
阿尔勒
http://www.pays-arles.org/e-patrimoine/communes/arles/
http://www.pays-arles.org/e-patrimoine/communes/arles/article/abbaye-de-montmajour
445
蒙马约尔修道院
布拉布拉
43.705856
4.664383
宗教
建筑、宗教、娱乐和娱乐
建筑与宗教用途
.appendTo（'Div_XML'）；
$（this.find（'patrimoine'）。每个(
函数（）
{
var fiche=$（this.find（'fiche'）.text（）；
var identifiant=$（this.find（'identifiant'）.text（）；
var titre=$（this.find（'titre'）.text（）；
var description=$（this.find（'description'）.text（）；
var latitude=$（this.find（'latitude'）.text（）；
$（''）.html（''）.appendTo（'Div_XML'）；
$（this.find（'MOTS'）。每个(
函数（）
{
var themes=$（this.find（'themes'）.text（）；
var categoriederarchitecture=$（this）.find（'categoriederarchitecture'）.text（）；
var typedarchitecture=$（this.find（'typedarchitecture'）.text（）；
var apparentance=$（this.find（'apparentance'）.text（）；
var epoque=$（this.find（'epoque'）.text（）；
var stylearchitectural=$（this）.find（'stylearchitectural'）.text（）；
var dataation=$（this.find（'dataation'）.text（）；
var edifice=$（this.find（'edifice'）.text（）；
var propriete=$（this.find（'propriete'）.text（）；
$（''）.html（''）.appendTo（'Div_XML'）；
}); 
$（this.find（'images'）。每个(
函数（）
{
var image=$（this.find（'image'）.text（）；
$（''）.html（''）.appendTo（'Div_XML'）；
});
});
});
});
});

我只是跟着

很明显，这不起作用，为什么

我怎样才能创造一个条件，只得到“阿尔勒”城市？

扔掉一堆代码，还有…

，这些代码不起作用，为什么不是一个正确的问题陈述。什么不起作用？我的意思是我的html不显示我的数据库，只是一个白色页面。所以从浏览器控制台开始，从那里提供调试信息。有错误吗？是否在“网络”选项卡中发出请求？请求中是否返回了预期的数据？ajax请求中有很多部分可能出错，您需要将它们隔离开来。存在错误，但我不知道解决方案是什么。那么错误是什么？
<!DocType html>
<html>
 <head>
     <meta http-equiv="content_type" content=text/html; charset="utf-8" />
     <title>spip.php.xml - database</title>
     <link rel="stylesheet" type="text/css" href="#.css" media="all" />
     <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 </head>

 <body>

     <header>

     </header>

      <script>
        $(document).ready(function()
            {   
                $.ajax({
                    type: "GET",
                    url: "spip.php.xml",
                    dataType:"xml",
                    success:function(xml)
                    {
                        $(xml).find('ville').each(
                        function()
                        { 
                            var idville = $(this).find('idville');
                            var nomville= $(this).find('nomville').text();
                            var site= $(this).find('site').text();
                            $('<div class="items" id="'+idville+'"></div>').html('<a href="'+site+'">'+nomville+'</a>').appendTo('#Div_XML');
                            $(this).find('patrimoine').each(
                                function()
                                {
                                    var fiche = $(this).find('fiche').text();
                                    var identifiant = $(this).find('identifiant').text();
                                    var titre = $(this).find('titre').text();
                                    var description = $(this).find('description').text();
                                    var latitude = $(this).find('latitude').text();
                                    $('<div class="items"></div>').html('<a href="#">MOTS</a>').appendTo('Div_XML');
                                    $(this).find('MOTS').each(
                                        function()
                                        {
                                            var themes = $(this).find('themes').text();
                                            var categoriedelarchitecture = $(this).find('categoriedelarchitecture').text();
                                            var typedarchitecture = $(this).find('typedarchitecture').text();
                                            var appartenance = $(this).find('appartenance').text();
                                            var epoque = $(this).find('epoque').text();
                                            var stylearchitectural = $(this).find('stylearchitectural').text();
                                            var datation = $(this).find('datation').text();
                                            var edifice = $(this).find('edifice').text();
                                            var propriete = $(this).find('propriete').text();
                                            $('<div class="items"></div>').html('<a href="#">MOTS</a>').appendTo('Div_XML');
                                        }); 
                                    $(this).find('images').each(
                                        function()
                                        {
                                            var image = $(this).find('image').text();
                                            $('<div class="items"></div>').html('<a href="#">MOTS</a>').appendTo('Div_XML');
                                        });
                                });
                        });
                    });
            });
     </script>
     <footer>

     </footer>

 </body>