Login using jQuery AJAX in PHP & MySQL

Tech Area
December 19, 2023

In this tutorial, We will learn how to login using JQuery AJAX in PHP and MySQL.

Files used in this tutorial:

1- connection.php (database connection file)

2- index.php (AJAX script)

3- fetch-data.php (fetch login data from the table)

Below are the step by step process of how to login using Jquery AJAX.

Step 1: Create a Database connection

In this step, create a new file connection.php to create database connection.

connection.php

<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "college_db";
$conn = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($conn, $database);
if(!$select_db)
{
	echo("connection terminated");
}
?>

Step 2: Create index.php

In this step, create a new file index.php. This is the main file used to implement AJAX to login using AJAX in PHP and MySQL.

This screenshot shows the login form.

index.php

<html>  
<head>  
    <title>Login Form</title>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
</head>
<style>
 .box
 {
  width:100%;
  max-width:600px;
  background-color:#f9f9f9;
  border:1px solid #ccc;
  border-radius:5px;
  padding:16px;
  margin:0 auto;
 }
 .msg
{
  color: red;
  font-weight: 700;
} 
</style>
<body>  
    <div class="container">  
    <div class="table-responsive">  
    <h3 align="center">Login Form</h3>
     <div class="box">
      <div class="form-group">
       <label for="email">Emailid</label>
       <input type="text" name="email" id="email" placeholder="Enter Email" class="form-control" required />
      </div>
      <div class="form-group">
       <label for="password">Password</label>
       <input type="password" name="pwd" id="pwd" placeholder="Enter Password" class="form-control"/>
      </div>
      <div class="form-group">
       <input type="submit" id="login" name="login" value="Login" class="btn btn-success" />
      </div>
       <p class="msg" id="res"></p>
     </div>
   </div>  
  </div>
 </body>  
</html>

Now use jquery AJAX script.

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#login").on("click",function(){
      var email = $("#email").val();
      var password = $("#pwd").val();
      if(email == '' || password == '')
      {
        $("#res").html("Both fields are required!");
      }
      else
      {
        $.ajax({
          url: 'fetch-data.php',
          method: 'post',
          data: {emailid: email, pwd: password},
          success: function(data){
            $("#res").html(data);
          }
        });
      }
    });
  });
</script>

Step 3: Create new file for fetch login data

In this step, create a new file fetch-data.php. This file used to fetch login data from the database.

fetch-data.php

<?php
require_once('connection.php');
$email = mysqli_real_escape_string($conn, $_POST['emailid']);
$pwd = md5(mysqli_real_escape_string($conn, $_POST['pwd']));

$select_query = mysqli_query($conn, "select * from tbl_user where emailid='$email' and password='$pwd' and status=1");
$row = mysqli_num_rows($select_query);
if($row>0)
{
	echo "Login Successful!";
}
else
{
	echo "Wrong Credentials!";
}
?>

Download Source Code

Multiple Image upload in PHP and MySQL

Subscribe us via Email

Join 10,000+ subscriber

Subscribe on YouTube

PHP Projects

Student record system project in PHP and MySQL Last Updated: July 3, 2024

Food ordering system project in PHP and MySQL Last Updated: June 27, 2024

Tourism management system project in PHP and MySQL Last Updated: June 24, 2024

Restaurant table booking system project in PHP and MySQL Last Updated: February 22, 2024

Hostel management system project in PHP and MySQL Last Updated: February 14, 2024

Online Pizza Delivery project in PHP Last Updated: February 4, 2024