Ajax PHP/MYSQL, TutorialsPoint, W3Schools Ajax PHP/MYSQL

Ajax PHP/MYSQL

The following example demonstrates how to communicate web page and web server.

url name : index.php

<!DOCTYPE html>
<html>
<head>
<link href="http://www.freetimelearning.com/images/favicon.png" rel="shortcut icon" type="image/x-icon" />	
<title>Ajax with PHP / MYSQL</title>
</head>
<style type="text/css">
label{ 
font-size:12px; 
font-family:Verdana, Geneva, sans-serif; 
font-weight:bold; 
padding:5px 0px 0px; 
margin:1px 0px; 
clear:both;
}
.form-control{ 
height:20px; 
width:250px; 
margin:2px 0px; 
border-radius:2px; 
border:1px solid #CCC; 
padding:5px 15px;
}
</style>
<link rel="stylesheet" type="text/css" href="http://www.freetimelearning.com/css/jquery-ui.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<body>
<form  action="" method="post">
	
    <label>State or City</label><br/>
	<input type="text" class="form-control state"  placeholder="State or City" name="state_city[]" value="" />
    
</form>

<!-- States--> 
<script type="text/javascript">	 
$(document).on("focus", "input.state", function () {
	$('.state').autocomplete({
		source: function( request, response ) {
			$.ajax({
				url : 'ajax_states.php',
				dataType: "json",
				data: {
				   name_startsWith: request.term
				},
				 success: function( data ) {
					 response(data);
				}
			});
		},
		autoFocus: true,
		minLength: 1      	
	  });
});
</script>
<!-- End States--> 
                        
</body>
</html>

include url name : ajax_states.php

<?php
	error_reporting(0);
	$db = new mysqli('localhost', 'username', 'password', 'database');
	if($db->connect_errno){
		die('Sorry Database not connected !!!');
	}
	
	$query = $db->query("SELECT state_name FROM states where state_name LIKE '%".strtoupper($_GET['name_startsWith'])."%' ORDER BY state_name ASC");	
	$data = array();
	while ($row = mysqli_fetch_array($query)) {
		array_push($data, $row['state_name']);	
	}	
	echo json_encode($data);
?>

Create Database :

Insert Data :

Output :

Ajax Tutorial