PHP REST API CRUD – Step 15
Step 15 AJAX Call from the Frontend to this API
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#register">
Register
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#login">
Login
</button>
</div>
<!-- The Register Modal -->
<div class="modal" id="register">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Registration Form</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form id="signup" method="post">
<div class="col-md-12">
<input class="form-control mt-3" type="text" name="name" placeholder="Name" required >
</div>
<div class="col-md-12">
<input class="form-control mt-3" type="email" name="email" placeholder="E-mail Address" required>
</div>
<div class="col-md-12">
<input class="form-control mt-3" type="password" name="password" placeholder="Password" required>
</div>
<div class="col-md-12">
<input class="form-control mt-3" type="tel" name="number" placeholder="Contact Number" required>
</div>
<div class="col-md-12">
<input class="form-control mt-3" type="text" name="companyName" placeholder="Your Company Name" required >
</div>
<div class="col-md-12">
<select name="country" class="form-select mt-3" required>
<option value="0">Country</option>
<option value="USA">USA</option>
<option value="CANADA">CANADA</option>
<option value="UK">UK</option>
<option value="RUSSIA">RUSSIA</option>
<option value="INDIA">INDIA</option>
</select>
</div>
<button type="submit" id="regbutton" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- The Login Modal -->
<div class="modal" id="login">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Login Form</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form id="loginn" method="post">
<div class="col-md-12">
<input class="form-control mt-3" type="email" name="email" placeholder="E-mail Address" required>
</div>
<div class="col-md-12">
<input class="form-control mt-3" type="password" name="password" placeholder="Password" required>
</div>
<button type="submit" id="loginbutton" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$("#regbutton").click(function(e){
e.preventDefault();
let regForm = document.getElementById("signup");
let regFormData = new FormData(regForm);
$.ajax({
url:"http://localhost/Digitizemydesign/api/Client/register.php",
type: "POST",
data: regFormData,
contentType: false,
processData: false,
success: function (res) {
console.log(res);
alert(res.message);
window.location.reload();
},
error: function (xhr, status, data) {
let err = eval("(" + xhr.responseText + ")");
alert(err.message);
}
});
});
});
</script>
<script>
$(document).ready(function(){
$("#loginbutton").click(function(e){
e.preventDefault();
let loginForm = document.getElementById("loginn");
let loginFormData = new FormData(loginForm);
$.ajax({
url:"http://localhost/Digitizemydesign/api/Client/login.php",
type: "POST",
data: loginFormData,
contentType: false,
processData: false,
success: function (res) {
console.log(res);
alert(res.message);
// window.location.reload();
},
error: function (xhr, status, data) {
let err = eval("(" + xhr.responseText + ")");
alert(err.message);
}
});
});
});
</script>
</body>
</html>