jQueryでxmlファイルの内容を読み込んでhtml要素で表示する方法は？

"sampleXML.xml"ファイルからデータを読み込み、そのデータをHTMLの "li"要素に表示しようとしています。これまで私が行っている、次のように私はhtmlファイルを作成して、次のとおりです。ファイル名 - 「Cloudtags.html」：jQueryでxmlファイルの内容を読み込んでhtml要素で表示する方法は？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> 
    <script src=Cloudtags.js></script> 
    <title>Css Globe: tag clouds</title> 
    <link rel="stylesheet" type="text/css" href="Cloudtags.css"> 
    <script type="text/javascript" src="js/jquery.js"></script> 

</head> 

<body> 

<div id="container">  
    <script type="text/javascript" src="http://cssglobe.com/ads/blogsponsor.js"></script> 

    <div id="side"> 
     <div class="tags"> 
      <ul class="cld"> 
       <li class="tag1" id="java"><a href="https://www.google.com">google</a></li> 
       <li class="tag2"><a href="#">Chiessy</a></li> 
       <li class="tag3"><a href="#">sitemap</a></li> 
       <li class="tag2"><a href="#">Sales</a></li> 
       <li class="tag4" ><a href="#">Gohome</a></li> 
       <li class="tag1"id="temp"><a href="#">Movies</a></li> 
       <li class="tag1"><a href="#">It Jobz</a></li> 
       <li class="tag5"><a href="#">Alza</a></li> 
       <li class="tag2"><a href="#">Sea food</a></li> 
       <li class="tag1"><a href="#">Hospital</a></li> 
       <li class="tag3"><a href="#">Smart phone</a></li> 
       <li class="tag4"><a href="#">Pizza </a></li> 
       <li class="tag1"><a href="#">Aerobics</a></li> 
       <li class="tag5"><a href="#">Yahoo...</a></li> 
       <li class="tag1"><a href="#">Anti-Virus</a></li> 
       <li class="tag2"><a href="#">Travel</a></li> 
      </ul> 
     </div> 
    </div> 

    <div id="xmldata"></div> 

</div><br> 
</body> 
</html>

、これが私の.jsファイルです：

$(document).ready(function() { 
    var nm; 
    $.ajax({ 
     type: "GET" , 
     url: "sampleXML.xml" , 
     dataType: "xml" , 
     success: function(xml) { 
      $(xml).find('person').each(function() { 
       nm= $(this).text() 
       $("#temp").html(nm); 
      } 
     } 
    }); 
});

マイXMLファイルです

<?xml version='1.0' ?> 
<doc> 
    <person> 
    <name>sachin</name> 
    <age>21</age> 
    </person> 
    <person> 
    <name>Akash</name> 
    <age>18</age> 
    </person> 
</doc>

しかし、これは機能しません。「$ .ajax」の外部ファイルをリンクする必要がありますか？私が間違っている場所を教えてください。。ありがとうございます。。

出典

2013-10-07 sachin_ware

簡単な方法は、1つのファイルを作成し、次にxsonをjsonに変換してから、そのjsonをajaxレスポンスで取得することです。私の答えを見てください。 –

何が問題なのですか？ファイルを引っ張ってもらえますか？ファイルを解析できますか？また、セミコロンがありません。 –

単にdataType： "xml"としてXMLファイルを読むことができます。これは、すでに解析されたXMLオブジェクトをretuenします。あなたはjqueryオブジェクトとしてそれを使用して何かを見つけたり、ループを投げたりすることができます。

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

    //var xmlDoc = $.parseXML(xml); <------------------this line 
    //if single item 
    var person = $(xml).find('person').text(); 

    //but if it's multible items then loop 
    $(xml).find('person').each(function(){ 
    $("#temp").append('<li>' + $(this).text() + '</li>'); 
    }); 
    }  
}); 
});

すべての

jQuery docs for parseXML

出典

2013-10-07 09:17:05

Thanx @ ChrisC、しかしそれでもまだ動作しません。ちょうど "sachin"と "21"の値を表示したいのです。 –

$（xml）は既にxmlオブジェクト型であるため、解析せずにそのまま使用してください –

まずファイルを作成し、その配列内のXMLデータを変換し、AJAX成功応答のためのJSON形式でそのデータを取得します。

次のように試してみてください：

$(document).ready(function() { 
    $.ajax({ 
     type: "POST", 
     url: "sample.php",    
     success: function (response) { 
      var obj = $.parseJSON(response); 
      for(var i=0;i<obj.length;i++){ 
       // here you can add html through loop 
      }     
     } 
    }); 
});

をsample.php

$xml = "YOUR XML FILE PATH"; 
$json = json_encode((array)simplexml_load_string($xml)),1); 
echo $json;

出典

2013-10-07 09:30:13

あなたのxmlが

あるとし $.each()

を使用することができます

<Cloudtags><id>1</id></Cloudtags><Cloudtags><id>2</id></Cloudtags><Cloudtags><id>3</id></Cloudtags>

あなたのケース

success: function (xml) { 
     $(xml).find('person').each(function(){// your outer tag of xml 
      var name = $(this).find("name").text(); // 
      var age = $(this).find("age").text(); 
     }); 
    }

出典

2013-10-07 09:43:45

のためにあなたのAjaxsuccess

success: function (xml) { 
    $(xml).find('Cloudtags').each(function(){// your outer tag of xml 
     var id = $(this).find("id").text(); // 
    }); 
}

で、私はresponseTextは、あなたが探しているものであるDEMO

var xmlDoc = $.parseXML(xml); 

var $xml = $(xmlDoc); 

var $person = $xml.find("person"); 

$person.each(function(){ 

    var name = $(this).find('name').text(), 
     age = $(this).find('age').text(); 

    $("#ProfileList").append('<li>' +name+ ' - ' +age+ '</li>'); 

});

出典

2013-10-07 10:21:53

、あなたはこのようにしたいと思います。例：

$.ajax({ 
... 
complete: function(xhr, status) { 
alert(xhr.responseText); 
} 
});

ここで、xmlはファイルです。これは、文字列のフォーム形式であなたのXMLになることを忘れないでください。 xmlparseを使用して、それらのいくつかを解析することができます。

出典

2015-04-24 01:02:00

jQueryでxmlファイルの内容を読み込んでhtml要素で表示する方法は？

答えて

関連する問題