Récuperer un flux Json online avec Ajax

**starfiko** · 04/07/2013, 10h26

Bonjour,

En effet, je souhaite récuperer un cours de la bourse en format json. L'url présent dans l'ajax renvoie : "{"to": "EUR", "rate": 0.76934913100000002, "from": "USD"}".

le soucis est que cette partie" $('#teste').text(reponse.to) " ne rentre pas en action.
Donc plusieur hypothese :
- ce bout de code ne fonctionne pas
- la fonction $.ajax n'arrive pas au success donc l'url est faux
- j'utilise mal la fonction $.ajax
- ou autre ...

Je ne comprends pas

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
	$('#test').click( function(){
		 $("#test").text('Clique prie en compte');
		$.ajax({
			url: 'http://rate-exchange.appspot.com/currency?from=USD&to=EUR',
			type: 'GET',
			dataType: 'json',
			success : function(reponse){
				$('#teste').text(reponse.to);
			}
		});
		return false;
	});
});

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script src="jquery-2.js"></script>
</head>
  <body>
	<div id="test">
		<span>Cliquez-moi pour afficher le graph</span>
		<span id="teste"></span>
	</div>
  </body>
</html>

Merci pour tout!

**Bovino** · 04/07/2013, 10h33

Merci pour tout!

De rien !

Au fait, tu as peut-être une question à poser ?

**starfiko** · 04/07/2013, 11h43

C'est pour savoir si vous suivez lol :p

J'ai modifié le 1er poste, la problematique si dessous, ce trouve aussi au-dessus

Bref le soucis est que cette partie" $('#teste').text(reponse.to) " ne rentre pas en action.
Donc plusieur hypothese :
- ce bout de code ne fonctionne pas
- la fonction $.ajax n'arrive pas au success donc l'url est faux
- j'utilise mal la fonction $.ajax
- ou autre ...

Je ne comprends pas

**Bovino** · 04/07/2013, 11h50

Avec $.ajax() tu vas être confronté à la Same Origin Policy.
Utilise $.getJSON() pour contourner cela.

**starfiko** · 04/07/2013, 12h27

En fait, j'ai déjà essayé et dès que j'utilise le $.getJSON, le reste de la page plante.
Il y a un graphique qui est sensé s'afficher plus bas et le code " $("#test").text('Clique prie en compte')" ne fonctionne plus.
Donc j'avais abandonné cette solution.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$(document).ready(function() {
	$('#test').click( function(){
		$("#test").text('Clique prie en compte');
		$.getJSON('http://rate-exchange.appspot.com/currency?from=USD&to=EUR',function(reponse){
			$:('#teste').text(reponse.to);	
				}
	return false;
	});
});

**Bovino** · 04/07/2013, 13h43

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$:('#teste').text(reponse.to);

Tu ne vois rien d'anormal ?

**starfiko** · 04/07/2013, 14h07

ah Oui erreur de copier/coller. Pourquoi toute la page bug, tout simplement problème de parenthèse et intervalle. Donc maintenant ça fait exactement comme la fonction $.ajax. Le code $('#teste').text(reponse.to); ne fonctionne pas. Pour faire plus simple je mets alert(reponse.to); mais cela ne fonctionne toujours pas.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
		$('#test').click( function(){
			$("#test").text('Cliquer prie en compte');
			$.getJSON('http://rate-exchange.appspot.com/currency?from=USD&to=EUR',function(reponse){
				alert(reponse.to);	
			});
 
		});
return false;
});

**starfiko** · 04/07/2013, 14h59

Après quelques recherches sur Same Origin Policy, il faut utiliser du JSONP au lieux de JSON. Comme l'url ne comporte pas le même domaine, on a des problème de sécurité. JSONP permet d'encapsuler le JSON, ainsi de contourner le "Same Origin Policy".

Pour plus de détaille (en anglais): http://www.codeproject.com/Articles/...-Origin-Policy
avec des exemples simples : http://fcargoet.evolix.net/2009/02/jsonp-avec-jquery/

Au final voici, mon code fonctionnel :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
		$('#test').click( function(){
			$("#test").text('Cliquer prie en compte');
				$.ajax({
					url : 'http://rate-exchange.appspot.com/currency?from=USD&to=EUR',
					dataType : 'jsonp',
					success : function(data){alert(data.to);} //votre callback
				});
		});
	return false;
});

En tout cas, Merci!

Récuperer un flux Json online avec Ajax

jQuery

Discussions similaires

Partager

Partager