In this jQuery tutorial, you’ll learn how to submit a form, post the data and format the response using jQuery and AJAX:
Here’s the code I used in the video:
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Get Data From a MySQL Database Using jQuery and PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Set form variable
var form = $('#search_form');
// Hijack form submit
form.submit(function(event){
// Set username variable
var username = $('#username').val();
// Check if username value set
if ( $.trim(username) != '' ) {
// Process AJAX request
$.post('process.php', {name: username}, function(data){
// Append data into #results div
$('#results').html(data);
});
}
// Prevent default form action
event.preventDefault();
});
});
</script>
</head>
<body>
<span>Search by name: </span>
<form method="POST" action="process.php" id="search_form">
<input type="text" id="username" name="name">
<input type="submit" id="submit" value="Search">
</form>
<div id="results"></div>
</body>
</html>Process.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
// Check if $_POST is set
if ( empty ( $_POST['name'] ) ) {
echo "Yo! Something ain't legit!";
exit;
}
// Connec to MySQL
$mysqli = new mysqli('localhost', 'YOUR_USERNAME', 'YOUR_PASSWORD', 'YOUR_DATABASE');
// Check connection
if ( mysqli_connect_errno() ) {
echo "Can't connect: " . mysqli_connect_error();
}
$stmt = $mysqli->prepare("SELECT * FROM ajaxget WHERE name = ?");
$stmt->bind_param("s", $_POST['name']);
$stmt->execute();
$result = $stmt->get_result();
while( $row = $result->fetch_object() ) {
$rows[] = $row;
}
?>
<ul>
<?php foreach ( $rows as $row ) : ?>
<li><?php echo $row->name; ?>: <?php echo $row->favorite_food; ?></li>
<?php endforeach; ?>
</ul>If you enjoyed this tutorial and want to keep learning, check out my free tutorial site here: https://johnsfreetuts.com
This Post Has 10 Comments
Nice Post
Working code! thanks. i was stuck in the same from a day. working fine for my login form now.
Nice BUT it only works for cases that exactly match the value inputted. If the name isn’t in the database you get an error.
Sure, you can just change your MySQL query statement for that. This is highlighting more the AJAX request and how to handle all that than the SQL part.
nice code
This code is a savior man !!!
Glad to hear that!
thanks 🙂
No problem
hi
thanks John Morris , your article was a help my