11-ajax/11-ajax-get-json.html

<!DOCTYPE html>

<html>

<head>
	<meta charset="utf-8" />
	
	<title>Ajax getJSON</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	
	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	
	<script>
	
	$(document).ready(function(){
	
		// posli HTTP GET request na server, JSON, zpracuj ziskana data v konkretnim callbacku
		$.getJSON( "./data.json" )
		.done(function( data ) { //callback, pokud vse dopadlo OK
			
			//zparsuj ziskana data z JSONu
			$.each( data, function( key, val ) {
				$("#result").append(key + ": " + val+"<br>")
			});
			
		});

	});
	
	</script>
	
</head>

<body>


	<div class="container">
		
			
		<h1>Ajax getJSON</h1>
		
		<h4 style="color: red">Pozor, z bezpečnostních důvodů nelze načíst soubor z jiné domény, než na kterém běží tato stránka (hlavička 'Access-Control-Allow-Origin'), proto je třeba tento soubor spustit na serveru. Lokální spuštění také nebude fungovat, protože load nefunguje s file://</h4>
		
		<a href="http://eso.vse.cz/~xhraj18/11-ajax-get-json.html">Spustit tento soubor z eso.vse.cz</a>
		
		<h2>Následující JSON jsme získali Ajaxem ze serveru</h2>
		
		<p id="result"></p>
		
	</div>
	

</body>

</html>