Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Submit a form, post the data and format the response using jQuery and AJAX (full tutorial here: http://youtu.be/-nkud6TwXBI)
<!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>
<?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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.