Je n'arrive pas à afficher les données (ajax)

Mac11 Messages postés 158 Statut Membre -
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention - 31 mai 2018 à 21:10

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 :

<!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

Afficher la suite

2 réponses

Réponse 1 / 2
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832
Bonjour,
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);
}
```
0
1. Mac11 Messages postés 158 Statut Membre 12
  
  Merci de me répondre
  il me répond ceci :
  Uncaught SyntaxError: Unexpected identifier => ligne 46
  qui est celle-ci : } error: function (jqXHR, exception) {
  
  0
2. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832
  
  Il me faut le code complet
  
  0

Mac11 Messages postés 158 Statut Membre 12

<!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>

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

Regarde donc sur internet comlent et où on doit ecrire le .error dans un ajax...
0

Je n'arrive pas à afficher les données (ajax)

2 réponses

Discussions similaires

Newsletters