web-dev-qa-db-fra.com

Comment lire le contenu d'un fichier xml dans jQuery et l'afficher dans des éléments html?

Jquery est nouveau pour moi. J'essaie de lire les données du fichier "sampleXML.xml" et de les afficher sous forme d'éléments "li" en HTML. Jusqu'à présent, j'ai créé un fichier html comme suit: nom du fichier - "Cloudtags.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>

et voici mon fichier .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);
            }
        }
    });
});

Mon fichier XML est comme suit:

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

Mais ça ne marche pas. Ai-je besoin de lier un fichier externe pour "$ .ajax" . Alors, dites-moi s'il vous plaît où je me trompe. . Merci d'avance . .

javascriptjqueryhtml
12
sachin_ware

Je pense que tu veux comme ça, D&EACUTE;MO

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>');

});
26
Rishi Php

Vous pouvez simplement lire le fichier XML en tant que dataType: "xml", l’objet xml sera déjà analysé. vous pouvez l'utiliser comme objet jquery et trouver n'importe quoi ou le lancer en boucle, etc. 

$(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>');  
    }); 
    }       
});
});

Documents jQuery pour parseXML

12
Chris Charles

Vous pouvez utiliser $.each()

Supposons que votre xml soit

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

Dans votre Ajaxsuccess

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

Pour votre cas

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();
        });
    }
1
Ajith S

responseText est ce que vous recherchez. Exemple: 

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

Où xml est votre fichier. Rappelez-vous que ce sera votre xml sous la forme d'une chaîne. Vous pouvez l’analyser en utilisant xmlparse comme mentionné.

1
Revanth Kumar

Tout d’abord, créez un fichier, puis convertissez vos données XML en tableau et récupérez-les au format JSON pour obtenir une réponse de succès ajax. 

Essayez comme ci-dessous:  

$(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;
1
Dhaval Bharadva

 $.get("/folder_name/filename.xml", function (xml) {
 var xmlInnerhtml = xml.documentElement.innerHTML;
 });

0
sakthi sudhan