PHP With Ajax
Kevin Amayi
Feb 11, 2022
- Use PHP With Ajax to Print Simple Addition Between Two Numbers
- Use PHP With Ajax to Print a PHP Array in the Form of a JSON Object
- Use PHP With Ajax to Print Division of a Number by 1-20
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