- Trang chủ
- Phát triển web
- PHP
- Sử dụng jQuery Ajax và PHP để tạo Submit form
Hướng dẫn làm sao để tạo được một Submit form đăng nhập dùng PHP và jQuery mà không cần load lại trang
Sau đây mình sẽ đi luôn vào hướng dẫn làm sao để tạo được một Submit form đăng nhập dùng PHP và jQuery thỏa mãn các yêu cầu:
- Gửi dữ liệu đến trang xử lý dữ liệu.
- Không cần load lại trang
Trong bài hướng dẫn này mình sẽ tạo một form đăng nhập dùng jQuery Ajax và PHP.
Bước 1: Tạo mẫu đăng nhập HTML
Tạo một mẫu đăng nhập bằng html như sau [Mình sử dụng luôn một mẫu Bootstrap 4 –Lấy ở đây]:Lấy ở đây]:
Ví dụ
Signin Template · Bootstrap
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media [min-width: 768px] {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
Please sign in
Email address
Password
Remember me
Sign in
© 2017-2019
Chú ý:Đặt ID cho các nơi quan trọng cần lấy dữ liệu như email, mật khẩu và nút submitĐặt ID cho các nơi quan trọng cần lấy dữ liệu như email, mật khẩu và nút submit
Bước 2: Sử dụng thư viện JQuery
Sử dụng 1 thư viện jQuery mới nhất chèn vào phần footer của website. [ Ở mẫu trên dòng số 50 mình đã chèn vào sẵn nhé, vì vậy nếu các bạn dùng mẫu trên thì không cần chèn thêm]
Ví dụ
Chú ý:Đặt ID cho các nơi quan trọng cần lấy dữ liệu như email, mật khẩu và nút submit
Bước 2: Sử dụng thư viện JQuery
Ví dụ
$[document].ready[function[]
{
//khai báo nút submit form
var submit = $["#btnSubmit"];
//khi thực hiện kích vào nút Sign in
submit.click[function[]
{
//khai báo các biến
var email = $["#inputEmail"].val[]; //lấy giá trị input của email
var password = $["#inputPassword"].val[]; //lấy giá trị input mật khẩu
//kiểm tra xem bạn đã nhập email chưa
if[email == '']{
alert['Vui lòng nhập email của bạn'];
return false;
}
//kiểm tra xem bạn đã nhập mật khẩu chưa
if[password == '']{
alert['Vui lòng nhập mật khẩu'];
return false;
}
//Lấy dữ liệu trong form login
var data = $['form#loginform'].serialize[];
//Sử dụng hàm $.ajax[]
$.ajax[{
type : 'POST', //kiểu post
url : 'submit.php', //gửi dữ liệu sang trang submit.php
data : data,
success : function[data]
{
if[data == 'false']
{
alert['Sai Email hoặc mật khẩu'];
}else{
alert['Đăng nhập thành công!'];
// Xử lý sau khi đăng nhập thành công
}
}
}];
return false;
}];
}];
Chú ý:Đặt ID cho các nơi quan trọng cần lấy dữ liệu như email, mật khẩu và nút submit
Bước 2: Sử dụng thư viện JQuery
Ví dụ
Chú ý:Đặt ID cho các nơi quan trọng cần lấy dữ liệu như email, mật khẩu và nút submit
Bước 2: Sử dụng thư viện JQuery