Verwendung der get()-Methode mit Ajax jQuery

Sheeraz Gul 15 Februar 2024

jQuery jQuery Ajax

Verwendung der get()-Methode mit Ajax jQuery

Die Methode get() in jQuery sendet asynchrone GET-Anfragen an den Server, um die Daten abzurufen. Dieses Tutorial demonstriert die Verwendung der get()-Methode in Ajax jQuery.

Verwendung der Methode `get()` in Ajax jQuery

Wie oben erwähnt, wird get() in jQuery in Ajax verwendet, um GET-Anfragen an den Server zu senden.

Syntax:

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

Die url ist die Anfrage-URL, von der wir die Daten abrufen. Die data sind die Daten, die über eine GET-Anfrage an den Server gesendet werden, und der callback ist die Funktion, die ausgeführt wird, wenn die Anfrage erfolgreich ist.

Lassen Sie uns ein einfaches get()-Beispiel erstellen, das zu demo.php geht und die abgerufenen Daten in der Warnung ausgibt.

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 ist:

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

Ausgabe:

Ajax-Get-Request

Lassen Sie uns ein weiteres Beispiel haben, das die Get-Anforderung sendet, um die Multiplikationstabelle für eine Zahl anzuzeigen.

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>";
}
?>

Ausgabe:

Ajax-Get-Anforderung für das Einmaleins

Autor: 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

Verwendung der Methode get() in Ajax jQuery

Verwendung der Methode `get()` in Ajax jQuery