PHP With Ajax

Kevin Amayi Feb 11, 2022
  1. Use PHP With Ajax to Print Simple Addition Between Two Numbers
  2. Use PHP With Ajax to Print a PHP Array in the Form of a JSON Object
  3. Use PHP With Ajax to Print Division of a Number by 1-20
PHP With Ajax

We will use PHP with ajax by printing a simple summation of two numbers, 2 and 3. Also, printing a php array in a JSON object.

We will also use PHP with ajax by getting HTML formatted output from PHP of a number’s division.

Use PHP With Ajax to Print Simple Addition Between Two Numbers

<!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">
    <title>Document</title>
</head>
<body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
     $(function(){
       $.get("summation.php", function(data){
          console.log(data);
       });
    });
</script>
</body>
</html>
<?php

  $number1 = 2;
  $number2 = 3;
  $summation = $number1 + $number2;

  echo "Summation, $summation";
?>

Output:

Summation, 5

Use PHP With Ajax to Print a PHP Array in the Form of a JSON Object

<!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">
    <title>Document</title>
</head>
<body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
     $(function(){
       $.get("json.php", function(data){
          console.log(data);
       });
    });
</script>
</body>
</html>
<?php

  $profile = array('name' => "Kevin Amayi", "age" => 23, "Profession" => "Programmer");
  echo json_encode($profile);
?>

Output:

{"name":"Kevin Amayi","age":23,"Profession":"Programmer"}

Use PHP With Ajax to Print Division of a Number by 1-20

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ajax and PHP Basics</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var number = $("#number").val();
        $.get("division.php", {number: number} , function(data){
            $("#division").html(data);
        });
    });
});
</script>
</head>
<body>
    <label>Enter a Number: <input type="number" id="number"></label>
    <button type="button">Show Division Table</button>
    <div id="division"></div>
</body>
</html>
<?php
$number =$_GET["number"];
//check if the data entered is a number => if so display a table with the number's division from 1-20
if(is_numeric($number) ){
    echo "<table>";
    for($j=1; $j<21; $j++){
        echo "<tr>";
            echo "<td>$number / $j</td>";
            echo "<td>=</td>";
            echo "<td>". $number / $j . "</td>";
        echo "</tr>";
    }
    echo "</table>";
}
?>

Output:

2 / 1	=	2
2 / 2	=	1
2 / 3	=	0.66666666666667
2 / 4	=	0.5
2 / 5	=	0.4
2 / 6	=	0.33333333333333
2 / 7	=	0.28571428571429
2 / 8	=	0.25
2 / 9	=	0.22222222222222
2 / 10	=	0.2
2 / 11	=	0.18181818181818
2 / 12	=	0.16666666666667
2 / 13	=	0.15384615384615
2 / 14	=	0.14285714285714
2 / 15	=	0.13333333333333
2 / 16	=	0.125
2 / 17	=	0.11764705882353
2 / 18	=	0.11111111111111
2 / 19	=	0.10526315789474
2 / 20	=	0.1