ajax
  1. ajax-ajaxwith-json-example
Previous

AJAX with JSON Example - (JSON in AJAX)

AJAX (Asynchronous JavaScript and XML) is a technique for creating fast and dynamic web pages. It allows you to create web pages without the need to refresh the whole page. In this tutorial, we'll show you how to use AJAX with JSON data to get data from the server and dynamically update the web page.

Syntax

$.ajax({
  url: "url",
  type: "method",
  data: "data",
  dataType: "json",
  success: function(data) {
    // code to be executed after the response is received
  },
  error: function(err) {
    // code to be executed when an error occurs
  }
});
  • url: The URL to send the request to.
  • type: The HTTP method to use for the request (e.g. GET, POST).
  • data: The data to send to the server with the request.
  • dataType: The expected data type of the response from the server (e.g. json, xml, html, text).
  • success: A function that will be called if the request succeeds.
  • error: A function that will be called if the request fails.

Example

Let's take a look at an example of using AJAX with JSON data.

<!DOCTYPE html>
<html>
<head>
  <title>AJAX with JSON Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="load-data">Load Data</button>

  <div id="data-container"></div>

  <script>
    $(document).ready(function() {
      $('#load-data').click(function() {
        $.ajax({
          url: 'data.json',
          type: 'GET',
          dataType: 'json',
          success: function(data) {
            var content = '';

            $.each(data, function(key, value) {
              content += '<div>';
              content += '<h3>' + value.title + '</h3>';
              content += '<p>' + value.body + '</p>';
              content += '</div>';
            });

            $('#data-container').html(content);
          },
          error: function(err) {
            console.log(err);
          }
        });
      });
    });
  </script>
</body>
</html>

In this example, we have a button that, when clicked, sends a request to the server for JSON data and updates the webpage with that data. The $.ajax function is used to make the request and the response is handled in the success function.

Explanation

In the above example, we created a button with an id of "load-data". When the button is clicked, an AJAX request is made to a server to fetch data from a JSON file.

The $.ajax function takes a number of parameters including the URL to request, the HTTP method to use, the data to send to the server (if any), the data type of the response and the success and error handling functions.

In our example, we used a $.each loop to iterate over each JSON object returned by the server and append the data to the webpage in a div element with an id of "data-container".

Use

Using AJAX with JSON data allows you to dynamically update a web page without reloading the entire page. This can lead to faster and more responsive web pages.

Important Points

  • The dataType parameter must be set to "json" when requesting JSON data.
  • JSON data can only be requested from the same domain due to security restrictions.
  • A server-side script or service must be created to serve the JSON data requested by the client.

Summary

In this tutorial, we showed you how to use AJAX with JSON data to get data from the server and dynamically update a web page. We discussed the syntax, example, output, explanation, use, and important points of using AJAX with JSON data. With this knowledge, you can now use AJAX with JSON data to create fast and dynamic web pages.

JSON in AJAX
Published on: