Je n'arrive pas à afficher les données (ajax)
Mac11
Messages postés
145
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Hello World !
Je n'arrive pas à afficher les données qui se trouvent dans un fichier xml. Le fichier xml est situé au même niveau que mon html. J'utilise jQuery et ajax pour mon petit programme. Ce qui me perturbe aussi, c'est que je n'ai aucun message d'erreur dans la console. Quelqu'un peut-il m'aider et me dire comment afficher ces données dans le fichier html. Merci
Voici les 2 script
html :
xml :
Merci pour votre aide
Je n'arrive pas à afficher les données qui se trouvent dans un fichier xml. Le fichier xml est situé au même niveau que mon html. J'utilise jQuery et ajax pour mon petit programme. Ce qui me perturbe aussi, c'est que je n'ai aucun message d'erreur dans la console. Quelqu'un peut-il m'aider et me dire comment afficher ces données dans le fichier html. Merci
Voici les 2 script
html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Données</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
function getXMLRacers(){
$.ajax(
{
url:'finishers.xml',
cache:false,
dataType:'xml',
success:function(xml){
$('#finishers_m').empty();
$('#finishers_f').empty();
$('#finishers_all').empty();
$(xml).find('runner').each(function(){
var info = '<li>Name: ' + $(this).find('fname').text() + '</li>' + ' ' + $(this).find('lname').text() + ' . Time: ' + $(this).find('time').text() + '</li>';
if($(this).find('gender').text() == 'm'){
$('#finishers_m').append(info);
} else if ($(this).find('gender').text() == 'f') {
$('#finishers_f').append(info);
} else {
$('#finishers_all').append(info);
}
});
getTime();
},
}
);
}
});
</script>
</head>
<body>
<div id="main">
<ul class="idTabs">
<li><a href="#male">Male finishers</a></li>
<li><a href="#female">Female Finishers</a></li>
<li><a href="#all">All Finishers</a></li>
</ul>
<div id="male">
<h4>Male Finishers</h4>
<ul id="finishers_m"></ul>
</div>
<div id="female">
<h4>Female Finishers</h4>
<ul id="finishers_f"></ul>
</div>
<div id="all">
<h4>All Finishers</h4>
<ul id="finishers_all"></ul>
</div>
</div>
<footer>
<h4>Congratulations to all our finishers !</h4>
<br />Last updated : <div id="updateTime"></div>
</footer>
</body>
</html>
xml :
<?xml version="1.0" encoding="utf-8" ?> <finishers> <runner> <fname>John</fname> <lname>Smith</lname> <gender>m</gender> <time>25:31</time> </runner> <runner> <fname>Jacob</fname> <lname>Walker</lname> <gender>m</gender> <time>25:54</time> </runner> <runner> <fname>Mary</fname> <lname>Brown</lname> <gender>f</gender> <time>26:01</time> </runner> <runner> <fname>Jenny</fname> <lname>Pierce</lname> <gender>f</gender> <time>26:04</time> </runner> <runner> <fname>Franck</fname> <lname>Jones</lname> <gender>m</gender> <time>26:08</time> </runner> <runner> <fname>Bob</fname> <lname>Hope</lname> <gender>m</gender> <time>26:38</time> </runner> </finishers>
Merci pour votre aide
A voir également:
- Je n'arrive pas à afficher les données (ajax)
- Fuite données maif - Guide
- Supprimer les données de navigation - Guide
- Afficher appdata - Guide
- Trier des données excel - Guide
- Afficher les commentaires word - Guide
2 réponses
Bonjour,
Si, pour commencer, tu fais un console.log dans le "success" ?
Ajoute donc également le .error dans ton ajax
Si, pour commencer, tu fais un console.log dans le "success" ?
success:function(xml){
console.log('La réponse :');
console.log(xml);
Ajoute donc également le .error dans ton ajax
error: function (jqXHR, exception) {
console.log(jqXHR);
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Tête la Première</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
function getXMLRacers(){
$.ajax(
{
url:'finishers.xml',
cache:false,
dataType:'xml',
success:function(xml){
console.log(xml);
/*$('#finishers_m').empty();
$('#finishers_f').empty();
$('#finishers_all').empty();
$(xml).find('runner').each(function(){
var info = '<li>Name: ' + $(this).find('fname').text() + '</li>' + ' ' + $(this).find('lname').text() + ' . Time: ' + $(this).find('time').text() + '</li>';
if($(this).find('gender').text() == 'm'){
$('#finishers_m').append(info);
} else if ($(this).find('gender').text() == 'f') {
$('#finishers_f').append(info);
} else {
$('#finishers_all').append(info);
}
});
getTime();*/
} error: function (jqXHR, exception) {
console.log(jqXHR);
},
}
);
}
});
</script>
</head>
<body>
<div id="main">
<ul class="idTabs">
<li><a href="#male">Male finishers</a></li>
<li><a href="#female">Female Finishers</a></li>
<li><a href="#all">All Finishers</a></li>
</ul>
<div id="male">
<h4>Male Finishers</h4>
<ul id="finishers_m"></ul>
</div>
<div id="female">
<h4>Female Finishers</h4>
<ul id="finishers_f"></ul>
</div>
<div id="all">
<h4>All Finishers</h4>
<ul id="finishers_all"></ul>
</div>
</div>
<footer>
<h4>Congratulations to all our finishers !</h4>
<br />Last updated : <div id="updateTime"></div>
</footer>
</body>
</html>
il me répond ceci :
Uncaught SyntaxError: Unexpected identifier => ligne 46
qui est celle-ci : } error: function (jqXHR, exception) {