Thursday, 5 May 2022

Performing GET Request with AJAX using jQuery

 Step 1:- write code fro ajaxform.php  file :-


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Example of Sending Data with Ajax GET Request in jQuery</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        // Get value from input element on the page

        var numValue = $("#num").val();

        

        // Send the input data to the server using get

        $.get("submission.php", {number: numValue} , function(data){

            // Display the returned data in browser

            $("#result").html(data);

        });

    });

});

</script>

</head>

<body>

    <label>Enter a Number: <input type="text" id="num"></label>

    <button type="button">Show Multiplication Table</button>

    <div id="result"></div>

</body>

</html>


Step 2:- write submission.php file


<?php

$number = $_GET["number"];

if(is_numeric($number) && $number > 0){

    echo "<table>";

    for($i=0; $i<11; $i++){

        echo "<tr>";

            echo "<td>$number x $i</td>";

            echo "<td>=</td>";

            echo "<td>" . $number * $i . "</td>";

        echo "</tr>";

    }

    echo "</table>";

}

?>

No comments:

Post a Comment