AJAX with PHP and MySQL: User Registration & Search

AJAX allows web applications to send and retrieve data from a server asynchronously without reloading the page. The following steps will guide you through implementing an AJAX with PHP and MySQL

1)Register a user dynamically with AJAX.
2)Search for users in the database.

Step 1:

Database Setup
Use the following SQL to create a users table in MySQL:

CREATE DATABASE ajax_demo;
USE ajax_demo;

CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
email VARCHAR(100)
);

Step 2:

User Registration with AJAX
Frontend (HTML + JavaScript)
This form allows users to register without refreshing the page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX User Registration & Search</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h2>User Registration</h2>
<input type="text" id="name" placeholder="Enter Name">
<input type="email" id="email" placeholder="Enter Email">
<button onclick="registerUser()">Register</button>
<p id="register_result"></p>

<h2>Search Users</h2>
<input type="text" id="search" placeholder="Search by Name" onkeyup="searchUsers()">
<div id="search_result"></div>

<script>
function registerUser() {
var name = $("#name").val();
var email = $("#email").val();

if (name == "" || email == "") {
alert("Please fill all fields.");
return;
}

$.ajax({
url: "register_user.php",
type: "POST",
data: { name: name, email: email },
success: function(response) {
$("#register_result").html(response);
$("#name").val("");
$("#email").val("");
}
});
}

function searchUsers() {
var search = $("#search").val();

$.ajax({
url: "search_user.php",
type: "POST",
data: { query: search },
success: function(response) {
$("#search_result").html(response);
}
});
}
</script>

</body>
</html>

Step 3:

Backend PHP for User Registration (register_user.php)
This script inserts user details into the database.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "ajax_demo";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

if (isset($_POST['name']) && isset($_POST['email'])) {
$name = $conn->real_escape_string($_POST['name']);
$email = $conn->real_escape_string($_POST['email']);

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Invalid email format.";
exit;
}

$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
if ($conn->query($sql) === TRUE) {
echo "User registered successfully!";
} else {
echo "Error: " . $conn->error;
}
}

$conn->close();
?>

Step 4:

Search Users (search_user.php)
This script retrieves users from the database based on the search query.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "ajax_demo";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

if (isset($_POST['query'])) {
$search = $conn->real_escape_string($_POST['query']);
$sql = "SELECT * FROM users WHERE name LIKE '%$search%'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "Name: " . $row['name'] . " | Email: " . $row['email'] . "<br>";
}
} else {
echo "No users found.";
}
}

$conn->close();
?>

How It Works?

1) User Registration

The user enters a name and email.
AJAX sends the data to register_user.php.
The PHP script inserts data into the database.
The user gets a success or error message.

2) User Search

The user types a name in the search field.
AJAX sends the input to search_user.php.
The PHP script retrieves matching users and displays the results dynamically.

Conclusion:

Using AJAX with PHP and MySQL enables smooth user interactions without page reloads. In this example, we implemented:
1)User Registration via AJAX.
3)Live User Search without refreshing the page.

The trailingslashit() Function in WordPress

Also Visit:

https://inimisttech.com/