JQuery Ajax và cách sử dụng jQuery Ajax để tải dữ liệu không cần tải lại trang

JQuery Ajax và cách sử dụng jQuery Ajax để tải dữ liệu không cần tải lại trang

AJAX là một phần trong thư viện JQuery, viết tắt của câu Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ). Nó là phương thức cho phép tải một phần dữ liệu mới vào tài liệu HTML mà không cần phải tải lại toàn bộ tài liệu, giúp giảm thiểu thời gian tải trang cũng như băng thông của website. Trong bài viết này mình sẽ chia sẻ về JQuery Ajax và cách sử dụng JQuery Ajax để tải dữ liệu.

Các phương thức trong Jquery

Phương thức load()

Load() là một phương thức đơn giản nhất trong kỹ thuật ajax. Chức năng của nó là tải và hiển thị nội dung đã tải vào một phần tử HTML nào đó.

Cú pháp: load(url, params, callback)

  • url: URL Tiếp nhận, xử lý và gửi lại dữ liệu.
  • Params: lưu giữ các biến cần gửi đi.
  • Callback: hàm mà nó sẽ gọi đến sau khi quá trình Ajax hoàn tất .

Ví dụ:

$(document).ready(function( ){
   $("div#result").load("result.php", {user: admin}, callback);
});
function callback(){
   alert("Kết thúc quá trình.");
}
//Nội dung trong result.php
if(isset($_POST['user']))
{
 echo 'Bạn đã gửi dữ liệu của người dùng = '.$_POST['user'].' thành công';
}else{
 echo 'Không nhận được dữ liệu của người dùng nào';
}

Phương thức get()

Để gửi dữ liệu theo phương thức get() của kỹ thuật ajax. ta có cú pháp sau:

Cú pháp: get(url, params, callback)

  • Các tham số tương tự như phương thức load().

Ví dụ:

$(document).ready(function( ){
   $.get("result.php", {user: admin}, function(data){$("div#result").html(data);});
});
//Nội dung trong result.php
if(isset($_GET['user']))
{
 echo 'Bạn đã gửi dữ liệu của người dùng = '.$_POST['user'].' thành công';
}else{
 echo 'Không nhận được dữ liệu của người dùng nào';
}

Phương thức post()

Tương tự như phương thức get() của kỹ thuật ajax, phương thức post giúp bảo mật dữ liệu gửi đi tốt hơn. ta có cú pháp sau:

Cú pháp: post(url, params, callback)

  • Các tham số tương tự như phương thức load().

Ví dụ:

$(document).ready(function( ){
   $.post("result.php", {user: admin}, function(data){$("div#result").html(data);});
});
//Nội dung trong result.php
if(isset($_POST['user']))
{
 echo 'Bạn đã gửi dữ liệu của người dùng = '.$_POST['user'].' thành công';
}else{
 echo 'Không nhận được dữ liệu của người dùng nào';
}

Phương thức ajax()

Ngoài các phương thức trên, ajax() là một phương thức tổng quát phổ biến nhất để sử dụng tải dữ liệu bất động bộ. Phương thức này cho phép cấu hình và tùy chỉnh các thông số, không bị bó buột như các phương thức trên.

Cú pháp:

$.ajax({
  type: 'Loại gửi dữ liệu (POST hoặc GET)',
  url: 'URL Tiếp nhận, xử lý và gửi lại dữ liệu',
  data: { Các biến dữ liệu được gửi lên server.(ten_bien1:dữliệu,ten_bien2:dữliệu,...). Có thể sử dụng  var data = $('form#ID_form').serialize(); để lấy toàn bộ dữ liệu từ 1 form có id là ID_form},
  dataType: Kiểu dữ liệu trả về ('html','text','json','xml'),
  success: function(data) {
    Nội dung sẽ được thực thi sau khi nhận được dữ liệu từ server
  },
  error: function() {
    Nội dung sẽ được thực thi khi có lỗi phát sinh
  }
});

Mình sẻ có vụ dụ cụ thể trong phần dưới đây.

Cách sử dụng JQuery Ajax để tải dữ liệu

Đây là ví dụ về việc sử dụng JQuery với phương thức Ajax để tải dữ liệu về từ server.

Đầu tiên bạn mở tệp HTML và tạo một form đơn giản như sau.

<form class="form-horizontal" id="form_input">
   <input type="text" name="user">
   <button type="submit">Gửi</button>
 </form>

Trong thẻ <head> của tài liệu HTML bạn thêm thư viện Jquery mới nhất vào.

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

Tiếp theo là bạn bỏ đoạn JQuery Ajax này vào dưới trang.

<script type="text/javascript">
   $(document).ready(function()
   { 
      //khai báo biến submit form lấy đối tượng nút submit
      var submit = $("button[type='submit']");

      //khi nút submit được click
      submit.click(function()
      {
        //khai báo các biến dữ liệu gửi lên server
        var user = $("input[name='user']").val(); //lấy giá trị trong input user
 
        //Kiểm tra xem trường đã được nhập hay chưa
        if(user == ''){
          alert('Vui lòng nhập Tên người dùng');
          return false;
        }
 
        //Lấy toàn bộ dữ liệu trong Form
        var data = $('form#form_input').serialize();
      
        //Sử dụng phương thức Ajax.
        $.ajax({
              type : 'GET', //Sử dụng kiểu gửi dữ liệu POST
              url : 'data.php', //gửi dữ liệu sang trang data.php
              data : data, //dữ liệu sẽ được gửi
              success : function(data)  // Hàm thực thi khi nhận dữ liệu được từ server
                        { 
                           if(data == 'false') 
                           {
                             alert('Không có người dùng');
                           }else{
                             $('#content').html(data); dữ liệu HTML trả về sẽ được chèn vào trong thẻ có id content
                           }
                        }
              });
              return false;
        });
    });
</script>

Cuối cùng là nội dung xử lý trong file data.php

<?php 
  $user= trim($_POST['user']);
?>
 <p>Xin chào <?php echo $user; ?></p>

Các bài liên quan

Tuấn ĐC

Tuấn ĐC

Tôi thích tự do, làm những gì mình thích, thích đi nhiều nơi và học được nhiều thứ.

Liên hết bài viết: ""