This page explains how to retrieve some simple JSON data and append it to a page. First the JSON through a script called jsonout.php
{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}
Now the HTML with jQuery to retrieve and display it within the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple JSON retrieval through jQuery</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font:10px/15px Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<script>
(function()
{
$.getJSON('jsonout.php', function(data)
{
$.each(data, function(key, val)
{
$('body').append('<p>'+key+':'+val+'</p>');
});
});
})();
</script>
</body>
</html>
No comments:
Post a Comment