index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <h1>Ajax Requests</h1>
      <form method="POST" id="ajaxForm" onsubmit="return false;">
        <div class="form-group">
          <label for="email">Email address</label>
          <input
            type="email"
            class="form-control"
            id="email"
            name="email"
            aria-describedby="emailHelp"
          />
          <small id="emailHelp" class="form-text text-muted"
            >We'll never share your email with anyone else.</small
          >
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>

      <a
        href="javascipt:;"
        class="btn btn-danger mt-4"
        id="btn"
        data-url="data.php"
        >Click Me</a
      >

      <table id="userData" class="table table-striped table-bordered mt-4">
        <thead class="bg-primary text-white">
          <tr>
            <th>Sr#</th>
            <th>User Name</th>
            <th>User Email</th>
            <th>User Phone#</th>
            <th>Date Time</th>
          </tr>
        </thead>
        <tbody id="userDataBody"></tbody>
      </table>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
      integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
      crossorigin="anonymous"
    ></script>
    <script>
      $(document).ready(function () {
        $("#ajaxForm").on("submit", function () {
          $.post("data.php", $("#ajaxForm").serialize(), function (data) {
            $("#userDataBody").html(data);
          });
        });

        $("#btn").on("click", function () {
          var a = $(this).data();

          $.ajax({
            type: "GET",
            url: a.url,
            data: { action: "ok", email: $("#email").val() },
            beforeSend: function () {
              if (!confirm("Are you sure?")) {
                return false;
              }
            },
            success: function (data) {
              $("#userDataBody").html(data);
            },
            complete: function () {
              alert("I am complete.");
            },
            error: function () {
              alert("I am error.");
            },
          });
        });
      });
    </script>
  </body>
</html>