Explain the common methods of sending request to a server in jQuery

Last Updated : 27 Oct, 2022

In this article, we will see the common methods of sending requests to a server by using the jQuery library. jQuery is an open-source JavaScript library jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animation, Ajax interactions cross-browser JavaScript development.

Common methods of Sending Requests to the Server: jQuery has two methods get() and post() that method used for sending get request and post requests to the server.

The first method is the get() way which is used to retrieve data from the server. The get() method may return cached data.
The post () method can also be used to retrieve the data from the server. However, post always uses sending the data to the server, and the Post method never caches the data.

Using the jQuery get() method to send the request to the server: The $.get() method loads data from the server

Syntax:

$.get(url,callback);

Parameters:

Url: The required URL parameter specifies the URL you wish to request.
Callback Function: The optional callback parameter is the name of the function to be executed if the request succeeds

Example 1: In this example, we will make a data.txt file. This file will be returned when you click the Get Request Button.

data.txt:

GeeksforGeeks

index.html:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <script type="text/javascript" 
            src= 
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> 
    </script> 
    <title>Get Request Example in JQuery</title> 
    <script> 
        $(document).ready(function () { 
            $('#Get-Method').click(function () { 
                $.get('data.txt', function (data, status) { 
                    $('#output').append(data); 
                    $('#response').append("Response: " + status); 
  
                }, 'text'); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <button id="Get-Method"> Get Request</button> 
    <p id="output"></p> 
    <p id="response"></p> 
</body> 
  
</html>

Output

Get Method Output

Using the jQuery post() method to send requests to Server: The post() method loads data from the server or sends the data to the server

Syntax:

$(selector).post(url,data,callback ,data Type);

Parameters:

Url: The required URL parameter specifies the URL you wish to request.
data: The data parameter data is sent to the server.
callback function: The callback function when to be executed if the requests succeed.
Type: datatype is the type of data.

Example 2: This example uses the post() method for sending the request to the server.

data.php: The file will be called when you click the Post Request Button.

PHP

<?php 
    echo "GeeksforGeeks" ; 
?>

index.html:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <script type="text/javascript" 
            src= 
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> 
    </script> 
    <title>Get Request Example in JQuery</title> 
</head> 
  
<body> 
    <h3>GeeksForGeeks</h3> 
    <button id="Post-Method">  
        Post Request Example 
    </button><br><br> 
    Response From Server:<h3 id="output"></h3> 
    <script> 
        $(document).ready(function () { 
            $("#Post-Method").click(function () { 
                $.post('data.php', { name: "GFG" }, function (data, status) { 
                    document.getElementById('output').innerHTML = data; 
                }); 
            }); 
  
        }); 
    </script> 
</body> 
  
</html>