How to Use the get() Method With Ajax jQuery

Sheeraz Gul Feb 15, 2024

jQuery jQuery Ajax

How to Use the get() Method With Ajax jQuery

The get() method in jQuery sends asynchronous GET requests to the server to retrieve the data. This tutorial demonstrates using the get() method in Ajax jQuery.

Use the `get()` Method in Ajax jQuery

As mentioned above, get() in jQuery is used in Ajax to send GET requests to the server.

Syntax:

$.get(url, [data],[callback])

The url is the request URL from which we will retrieve the data. The data is the data that will be sent to the server via a GET request, and the callback is the function that will be executed when the request succeeds.

Let’s create a simple get() example, which will go to demo.php and print the data retrieved in the alert.

Code - HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("demo.php", function(Get_Data, Get_Status){
            alert("Data Retrieved: " + Get_Data + "\n GET Status: " + Get_Status);
        });
    });
});
</script>
</head>
<body>

    <button>Send an HTTP GET request to demo.php</button>

</body>
</html>

Code - demo.php is:

<?php
echo "Hello This is GET request data from delftstack.";
?>

Output:

Ajax Get Request

Let’s have another example that will send the get request to show the multiplication table for a number.

Code - HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Ajax get() Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){

        var Number_Value = $("#input_number").val();

        // Send input data to the server using get
        $.get("demo.php", {Number: Number_Value} , function(result_data){
            // Display the returned data in browser
            $("#multiply_result").html(result_data);
        });
    });
});
</script>
</head>
<body>
    <label>Enter a Number: <input type="text" id="input_number"></label>
    <button type="button">Press the Button to Show Multiplication Table</button>
    <div id="multiply_result"></div>
</body>
</html>

Code - demo.php:

<?php
$num = htmlspecialchars($_GET["Number"]);
if(is_numeric($num) && $num > 0){
    echo "<table>";
    for($x=0; $x<11; $x++){
        echo "<tr>";
            echo "<td>$num x $x</td>";
            echo "<td>=</td>";
            echo "<td>" . $num * $x . "</td>";
        echo "</tr>";
    }
    echo "</table>";
}
?>

Output:

Ajax Get Request for Multiplication Table

Author: Sheeraz Gul

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

Use the get() Method in Ajax jQuery

Use the `get()` Method in Ajax jQuery