How to use JSON with HTTP via JQuery

Here's an example of using JQuery to load a JSON file via HTTP and output it to a web page.

Besides using JavaScript to retrieve a JSON file via HTTP, you can also do it using a JavaScript library such as JQuery.

Here's an example of how you can use JQuery to retrieve a JSON file via HTTP, then output it to a web page.

In this example, we'll use artists.txt which contains the following data:

And here's the JQuery code that will load the JSON file, format its contents with HTML tags, then display the result:

<!doctype html>
<title>Example</title>


<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


<script>
$(function() {

  // User clicks the "getData" button
  $("#getData").click(function() {
  
    // Put artistList element and JSON file location into a variable
    var artistList = $("#artistList");
    var url = "https://web.QHMit.com/json/tutorial/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>

Try it

The `$.ajax()` Method

JQuery also has an $.ajax() method that could be used instead of $.getJSON().

The $.ajax() method can be used to perform an asynchronous HTTP (Ajax) request. The difference is that $.ajax() is not just for JSON requests, it can be used for other types of requests, such as XML, scripts, HTML, and even plain text requests.

The way it works is like this:

The $.ajax() method has a lot of options available for customizing your HTTP request. These are all explained in the JQuery API documentation.

How to use JSON with HTTP via JQuery

The $.ajax() Method

The `$.ajax()` Method