Điều làm mình thích khi sử dụng jQuery đó là khả năng gửi, load dữ liệu mà không làm mất dữ liệu ở trang hiện tại. Đặc biệt hơn khi kết với PHP để thêm dữ liệu vào Database thì sẽ hết sức tuyệt vời.

Bạn sẽ hiểu rõ hơn về cách thức hoạt động của phương thức .ajax sau khi thực hành theo bài viết này.

Bước 1: Tạo Form input để nhập dữ liệu và một đoạn jQuery xử lý đặt tên là insert.php

<form id="data" method="post">
  <input type="text" name="usermame" id="username"/><br />
  <input type="password" name="password" id="password"/><br />
  <input type="submit" value="Insert" id="Submit1" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

    $("#Submit1").click(function(){

      var username = $("#username").val();
      var password = $("#password").val();

      var dataString = 'username='+ username + '&password='+ password;

      if(username==''||password=='')
      {
        alert("Please Fill All Fields");
      }
      else
      {

      $.ajax({
        type: "POST",
        url: "insert_data.php",
        data: dataString,
        cache: false,
        success: function(result){
          alert(result);
        }
      });
    }
  return false;
  });
});
</script>

Qua đoạn trên bạn sẽ thấy là trước tiên jQuery sẽ lắng nghe sự kiện click chuột từ button Submit1. Tiếp theo đó là lấy data từ input. Kiểm tra điều kiện bằng if nếu trống thì hiện lên cảnh báo. Còn ngược lại dùng .ajax() gửi data tới file insert_data.php.

beforeSend: function(){
   jQuery('.ajax-loader').append('Đợi một chút');
},
complete: function(){
   jQuery('.ajax-loader').hide();
},

Đoạn mã trên sẽ thêm đợi load data và sau khi load xong.

Bước 2: Tạo file insert_data.php

<?php
$connection = mysqli_connect("localhost", "root", "", "test");

$username=$_POST['username'];
$password=$_POST['password'];

$query = mysqli_query($connection, "insert into admin(username, password) values ('$username', '$password')");
echo "Form Submitted Succesfully";
mysqli_close($connection); 
?>

Bạn cần lưu ý là phải kết nối đúng cơ sở dữ liệu trong Phpmyadmin. Của mình hiện tại CSDL là test. Nếu của bạn tên khác cần phải đặt chính xác như thế. Tại insert into admin thì admin là bảng nằm trong Database test.

Như vậy là bạn đã biết cách sử dụng Ajax jQuery để insert data vào Database trong MySQL rồi đúng không nào. Hãy tiếp tục theo dõi các bài viết khác trong chuyên mục jQuery này nhé!