jQuery AJAX Example

jQuery is a JavaScript library that is designed to interact with JavaScript easily. jQuery has get() and post() functions that are used to send a request to the server.

get()- This function sends a request to the server using HTTP GET method. It has the following syntax-

$.get(url, data, callback)

url- This parameter specifies the URL to which request is to be sent.
data- It is an optional parameter. It is used to provide data that is to be sent along with the request.
callback- It is an optional parameter. It specifies the function to be called when the response is received.

post()- This function sends a request to the server using HTTP POST method. It has the following syntax-

$.post(url, data, callback)

url- This parameter specifies the URL to which request is to be sent.
data- It is an optional parameter. It is used to provide data that is to be sent along with the request.
callback- It is an optional parameter. It specifies the function to be called when the response is received.

Example.html

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         $(document).ready(function(){
    	    $("#clickme").click(function(){
	       $.get("/ajax/details.php", function(data, status){
                  $("#mobiles").html(data);
               });
    	    });
         });
      </script>
   </head>
   <body>
      <button id="clickme">Show Details</button>
      <div id="mobiles"></div>
   </body>
</html>

details.php

<?php
   echo "Name: Samsung Galaxy J7"."<br />";
   echo "Price: 15500"."<br />";
   echo "Features: "."<br />";
   echo "Screen Size: 5.5"."<br />";
   echo "Operating System: Android 6.0"."<br />";
?>

Output