ajax
  1. ajax-json-in-ajax
PreviousNext

JSON in AJAX

JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. AJAX (Asynchronous JavaScript And XML) is a powerful technique for creating fast and dynamic web pages. In this tutorial, we'll discuss how to use JSON in AJAX to load and manipulate data dynamically.

Syntax

// AJAX call using jQuery
$.ajax({
  url: 'data.json',
  dataType: 'json',
  success: function(data) {
    // code to execute on success
  },
  error: function(xhr, status, error) {
    // code to execute on error
  }
});
  • url: The URL to load the JSON data from.
  • dataType: The expected data type (JSON in this case).
  • success: A callback function to execute on a successful response.
  • error: A callback function to execute on an unsuccessful response.

Example

Let's use JSON in AJAX to load and display data dynamically on a web page.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>JSON in AJAX</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: 'data.json',
        dataType: 'json',
        success: function(data) {
          // loop through the data and append it to the table
          $.each(data, function(i, item) {
            $('<tr>').append(
              $('<td>').text(item.id),
              $('<td>').text(item.name),
              $('<td>').text(item.email)
            ).appendTo('#users-table');
          });
        },
        error: function(xhr, status, error) {
          console.log(error);
        }
      });
    });
  </script>
</head>
<body>
  <table id="users-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <!-- data will be loaded here dynamically -->
    </tbody>
  </table>
</body>
</html>

// data.json
[
  {
    "id": 1,
    "name": "John Doe",
    "email": "john.doe@example.com"
  },
  {
    "id": 2,
    "name": "Jane Smith",
    "email": "jane.smith@example.com"
  },
  {
    "id": 3,
    "name": "Bob Johnson",
    "email": "bob.johnson@example.com"
  }
]

Explanation

In this example, we used jQuery's $.ajax() function to load data from a JSON file called data.json. We specified the data type as JSON using the dataType parameter. In the success callback function, we looped through the data using $.each() and dynamically created rows in a table using jQuery's DOM manipulation functions. Finally, we appended the rows to the tbody element of the table.

Use

Using JSON in AJAX is a powerful technique for loading and manipulating data on a web page dynamically. This allows for a more interactive and engaging user experience.

Important Points

  • JSON is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate.
  • AJAX is a powerful technique for creating fast and dynamic web pages.
  • When using JSON in AJAX, you need to specify the expected data type as JSON using the dataType parameter in the jQuery $.ajax() function.
  • Use jQuery's DOM manipulation functions to dynamically create and update HTML elements based on the loaded JSON data.

Summary

In this tutorial, we discussed how to use JSON in AJAX to load and manipulate data dynamically on a web page. We covered the syntax, example, output, explanation, use, important points, and summary of JSON in AJAX. With this knowledge, you can now use JSON in AJAX to interact with, load, and manipulate data on your web pages.

JSON BasicsAJAX with JSON Example
Published on: