Syntax error What is the difference between jQuery.load() and jQuery.get() methods in jQuery?

What is the difference between jQuery.load() and jQuery.get() methods in jQuery?

jQuery load() method

The load( url, data, callback ) method loads data from the server and places the returned HTML into the matched element.

Here is the description of all the parameters used by this method −

  • url − A string containing the URL to which the request is sent.
  • data − This optional parameter represents a map of data that is sent with the request.
  • callback − This optional parameter represents a function that is executed if the request succeeds

Assuming we have following HTML content in result.html file:

<h1>THIS IS RESULT...</h1>

Example

The following is the code snippet showing the usage of this method.

   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       
      <script>
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('result.html');
            });
         });
      </script>
   </head>
   
   <body>
   
      <p>Click on the button to load result.html file:</p>
       
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
       
      <input type = "button" id = "driver" value = "Load Data" />
       
   </body>

jQuery get() method

The jQuery.get( url, [data], [callback], [type] ) method loads data from the server using a GET HTTP request.

Here is the description of all the parameters used by this method −

  • url − A string containing the URL to which the request is sent
  • data − This optional parameter represents key/value pairs that will be sent to the server.
  • callback − This optional parameter represents a function to be executed whenever the data is loaded successfully.
  • type − This optional parameter represents type of data to be returned to callback function: "xml", "html", "script", "json", "jsonp", or "text".

Let’s say we have the following PHP content in result.php file,

<html>
   <?php
    if( $_REQUEST["name"] ) {

      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
    }
   ?>
</html>

Example

The following is the code snippet showing the usage of this method −

   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       
      <script>
         $(document).ready(function() {
           
            $("#driver").click(function(event){
               $.get(
                  "result.php",
                  { name: "Zara" },
                  function(data) {
                     $('#stage').html(data);
                  }
               );
            });
               
         });
      </script>    
   </head>
   
   <body>
   
      <p>Click on the button to load result.html file</p>
       
      <span id = "stage" style = "background-color:#cc0;">
         STAGE
      </span>
       
      <div><input type = "button" id = "driver"
         value = "Load Data" /></div>
   
   </body>
Updated on: 2020-02-17T07:17:43+05:30

623 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements