Sử Dụng JQuery Ajax Và PHP để Tạo Submit Form

Trang chủ » Submit Form Bằng Ajax » Sử Dụng JQuery Ajax Và PHP để Tạo Submit Form

Có thể bạn quan tâm

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):

Ví dụ

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="generator" content="Jekyll v3.8.5"> <title>Signin Template · Bootstrap</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> .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; } } </style> <!-- Custom styles for this template --> <link href="signin.css" rel="stylesheet"> </head> <body class="text-center"> <form class="form-signin" method="post" id="loginform"> <img class="mb-4" src="/docs/4.3/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"> <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1> <label for="inputEmail" class="sr-only">Email address</label> <input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <label for="inputPassword" class="sr-only">Password</label> <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required> <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit" id="btnSubmit">Sign in</button> <p class="mt-5 mb-3 text-muted">© 2017-2019</p> </form> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

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

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ụ

<!-- JQuery --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Bước 3: Triển khai Mã JS

Viết code JS để thực hiện việc kiểm tra dữ liệu khi bạn click nút Submit, nếu dữ liệu thỏa mãn điều kiện thì sẽ gửi lên trang xử lý dữ liệu.

Ví dụ

<script type="text/javascript"> $(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; }); }); </script>

Bước 4: Triển khai mã PHP xử lý dữ liệu

Viết code php của trang submit.php để xử lý dữ liệu gửi đến từ code js bên trên

Ví dụ

<?php if($_POST) { $email = trim($_POST['email']); $password = trim($_POST['password']); //nếu đăng nhập đúng if($email == '[email protected]' && $password == '123456') { echo 'Thành công'; }else{ //nếu đăng nhập sai echo 'false'; } } ?>

Trên đây là ví dụ đơn giản để các bạn có thể hiểu cách đăng nhập dùng jQuery Ajax kết hợp với PHP.

Chúc các bạn thành công

Từ khóa » Submit Form Bằng Ajax