Skip to content

Instantly share code, notes, and snippets.

@matt-daniel-brown

matt-daniel-brown/jquery-ajax-getjson---append-to-html.html

Last active October 13, 2017 23:57
Show Gist options
  • Save matt-daniel-brown/105c2433e03201f8f3904ecc03995e05 to your computer and use it in GitHub Desktop.
Save matt-daniel-brown/105c2433e03201f8f3904ecc03995e05 to your computer and use it in GitHub Desktop.
Download ZIP
A Few SIMPLE jQuery AJAX (to HTML) examples.
Raw
jquery-ajax-getjson---append-to-html.html
<!doctype html>
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function() {
$("#getData").click(function() {
// Put artistList element and JSON file location into a variable
var artistList = $("#artistList");
var url = "https://www.quackit.com/jquery/examples/artists.txt";
// Get the JSON file
$.getJSON(url, function(data) {
// Put artist info into a variable
var artists = data.artists.map(function(item) {
return item.artistname + " (" + item.born + ")";
});
// Remove all child nodes (including text nodes)
artistList.empty();
// Format artists with HTML tags
if (artists.length) {
var content = "<li>" + artists.join("</li><li>") + "</li>";
var list = $("<ul>").html(content);
artistList.append(list);
}
});
});
});
</script>
<button id="getData">Display Artists</button>
<div id="artistList"></div>
Raw
jquery-ajax-load-with-callback---append-to-html.html
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( "#data" ).load( "https://www.quackit.com/jquery/examples/latestData.html", function() {
alert( "We got the data!" );
});
});
});
</script>
<button>Load Latest Data</button>
<div id="data"></div>
<div id="status"></div>
Raw
most-basic-jquery-ajax-load---append-to-html.html
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( "#data" ).load( "https://www.quackit.com/jquery/examples/latestData.html" );
});
});
</script>
<button>Load Latest Data</button>
<div id="data"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment