AJAX Post Request – Explanation with Example

An AJAX POST request is a way to send data from a client (like a web browser) to a server without reloading the page. This is commonly used in web applications to submit forms, update content dynamically, or perform background operations.

Explanation:

• AJAX: Asynchronous JavaScript and XML.
• POST: HTTP method used to send data to the server.
• Used to send form data, JSON, or any payload securely.
• Unlike GET, POST does not append data in the URL.

Example: AJAX POST Request using jQuery

<!-- HTML form -->
<form id="loginForm">
  <input type="text" id="username" placeholder="Username" required>
  <input type="password" id="password" placeholder="Password" required>
  <button type="submit">Login</button>
</form>

<!-- AJAX Script -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $('#loginForm').on('submit', function(e) {
    e.preventDefault(); // prevent form from submitting normally

    $.ajax({
      url: '/login',          // server endpoint
      type: 'POST',           // AJAX POST Request
      data: {
        username: $('#username').val(),
        password: $('#password').val()
      },
      success: function(response) {
        alert('Login Successful');
        console.log(response);
      },
      error: function(xhr) {
        alert('Login Failed');
        console.log(xhr.responseText);
      }
    });
  });
</script>

Key Points:

• AJAX POST requests are ideal for secure form submissions.
• No page reload occurs.
• Data is sent in the body of the request (not in the URL).
• You can handle the response dynamically.