PHPAJAX

From mi-linux
Revision as of 12:01, 6 September 2016 by In9352 (talk | contribs)
Jump to navigationJump to search

Main Page >> Web Application Development >> Workbook >> Template Engines

Ajax with jQuery

Let's implement this very simple Ajax example: http://mi-linux.wlv.ac.uk/~in9352/ajax/

jQuery

Client-side

<html>
	<head>
		<title>Ajax example</title>
		<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
		<script>
			function DoDearch()
			{
				// This is the Ajax call to "getdata.php"
				$.ajax({
				  method: "GET",
				  url: "getdata.php",
				  data: { searchValue: $('#searchValue').val() }
				})
				
				// And this handles the response
				.done(function( response ) {
					// Write response to our "results" element
					$( "#results" ).html(response);
				});		
			}
		</script>
	</head>
	<body>
		<h1>Ajax example</h1>
		Enter value: <input type="text" id="searchValue">
		<input type="button" value="Search" onclick="DoDearch();">
		<p id="results"></p>
	</body>
</html>

Server-side

<?php
	
	// Retreive value passed from Ajax call
	$searchValue = $_GET['searchValue'];
	
	// Debug message
	echo "Performing search for ".$searchValue."...";
	
	// Connect to database
	// Build SQL statement
	// Run SQL statement
	// Loop through results and display

?>