Web Development – An Introduction to AJAX

Web Development – An Introduction to AJAX

A tutorial for the Ajax function. Assuming you understand PHP and JavaScript.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
	var pineapple_js 	= "pineapple";
	var pen_js 		= "pen";

	$.ajax({
		url: "hello.php",
		method: "POST",
		data:{
			pineapple_php  : pineapple_js,
			pen_php        : pen_js
		},
		success: function(data){
			if(data == "pineapple"		){	$('body').html('<img src="https://tinyurl.com/y9lurfan">');	}
			if(data == "pen"		){	$('body').html('<img src="https://tinyurl.com/y79nx6j7">');	}
			if(data == "pineapplepen"	){	$('body').html('<img src="https://tinyurl.com/ybxro2ng">');	}
		},
		error: function(){
			alert("error");
		}
	});
</script>
</head>
<body>START</body>
</html>

hello.php

<?php
	$php_var1 = $_POST["pineapple_php"];
	$php_var2 = $_POST["pen_php"];
	echo $php_var1.$php_var2;
?>

Leave a Reply

Your email address will not be published. Required fields are marked *