Hiểu Thêm JQuery Ajax Và Kiến Thức Cơ Bản | TopDev

Trang chủ » Cách Sử Dụng Jquery Ajax » Hiểu Thêm JQuery Ajax Và Kiến Thức Cơ Bản | TopDev

Có thể bạn quan tâm

được tag với ID là stage.

Phương thức “get()” và “post()”

Ở 2 phương thức này thì trong đó phương thức “ get() ” giống “ load() ” về mặt kĩ thuật đó chính là dùng “method” là “GET” trong “ <form> ”. Tương tự “ post() ” sẽ tượng trưng cho “method” là “POST” của “ <form> ”. Cả 2 phương thức này đều cách viết tắt của phương thức “ajax()” mà chúng ta sẽ làm quen ở phần tới.

Phương thức “get()”

$(document).ready(function() { $('#load-du-lieu').click(function(e) { e.preventDefault(); $.get('vidu1.html', function(ketqua) { $('#noidung').html(ketqua); $('#noidung').html($('#chuoi-can-lay').html()); }); }); });
  • Đoạn code này cho bạn thấy rằng để sử dụng được phương thức “ get() ”, các bạn cần dùng đến biến “ $ ” (hay “ jQuery ”) sau đó sử dụng thẳng phương thức “ get()
  • Đối số truyền vào không thể tách lọc được dữ liệu trả về thẳng trong đường dẫn như phương thức “ load() ”.
  • Kết quả trả về sẽ thông qua đối số thứ 2 của phương thức “ get() ” là một Anonymous Function có đối số mặc định trả về là “ ketqua ”
  • Để tách lọc dữ liệu từ “ ketqua ” chúng ta cần phải ghi nó vào “DOM” hay một nơi nào đó trong cặp thẻ “ <body> ” của chúng ta. Sau đó chúng ta dùng tiếp “ $(‘#id-can-lay’).html() ” để tách lọc dữ liệu
  • Ngoài ra “ get() ” còn hỗ trợ bạn truyền dữ liệu sang file lấy dữ liệu.

Phương Thức “post()”

Cách dùng của phương thức “ post() ” sẽ giống với “ get() ” nhưng khác về kĩ thuật truyền dữ liệu mà thôi.

$(document).ready(function() { $('#load-du-lieu').click(function(e) { e.preventDefault(); $.post('vidu2.php', { a: "content abc", b: "content bcd" },function(ketqua) { $('#noidung').html(ketqua); }); }); });

Nội dung của file “vidu2.php“:

<?php echo '<pre>' .print_r($_POST,true). '</pre>';

Ở ví dụ phương thức “ post() ” này, ở đối số thứ 2 thay vì là Anonymous Function như ở ví dụ “ get() ” mà chúng ta đã xem trước đó, thì đây là “một đối tượng” (Object) chứa những dữ liệu mà chúng ta cần truyền qua đường dẫn “vidu2.php” để nhận và trả về dữ liệu. Kết quả trả về sẽ được đưa vào đối số thứ 3 cho chúng ta.

Phương thức “ajax()”

Ngoài các hàm trên mà chúng ta thường hay dùng, jQuery còn cung cấp thêm cho ta một hàm ajax() tổng quát. Với hàm này, ta có thể tùy chỉnh cấu hình, thêm bớt các thông số chứ không bị bó hẹp như hai hàm trên.Chỉ cần sử dụng 1 hàm này có thể đáp ứng các yêu cầu về thực thi ajax.

$(document).ready(function() { $('#load-du-lieu').click(function(e) { e.preventDefault(); $.ajax({ url: 'vidu2.php', type: 'POST', dataType: 'html', data: { a: "content abc", b: "content bcd" } }).done(function(ketqua) { $('#noidung').html(ketqua); }); }); });

Đối số đầu tiên chúng ta truyền vào cho phương thức “ ajax() ” chính là một đối tượng (Object) gồm các thuộc tính cấu hình để kĩ thuật AJAX của chúng ta có thể thực thi. Trong đó:

  1. url : chuỗi chứa đường dẫn tới file cần lấy và trả về dữ liệu
  2. type : phương thức gửi đi tương tự như của “ <form> ”, mặc định là “GET” nếu như các bạn không truyền vào.
  3. dataType : xác định dữ liệu trả về thuộc dạng nào? Nếu các bạn không truyền thì jQuery tự động nhận biết kiểu dữ liệu (script, html, json…). Tuy nhiên, tôi khuyến cáo các bạn nên truyền vào đầy đủ để nhận dữ liệu chính xác nhất. Và thông dụng nhất chính là “html”.
  4. data : truyền dữ liệu sang đường dẫn chỉ định để thực hiện xử lý và trả về dữ liệu. Tương tự như cách truyền dữ liệu của phương thức “ post() ”.
  5. “ done() ” : ở loạt các bài viết hướng dẫn các bài viết về kĩ thuật Ajax với phương thức “ ajax() ” trước đây trên Internet. Thay vì dùng “done()” chúng ta sẽ dùng thuộc tính “success” trong đối tượng truyền vào “ ajax() ” nhưng từ các phiên bản mới hơn của jQuery. Họ khuyến cáo chúng ta nên sử dụng các phương thức như “ done() , fail() , always() ” (Tương ứng: Hoàn thành, thất bại và luôn luôn thực hiện). Nên tùy vào nhu cầu mà bạn xài phương thức tương ứng. Và nên nhớ là đi kèm với phương thức “ ajax() ” hoặc lưu vào một tên biến rồi dùng sau để nhận kết quả trả về.

Tham khảo thêm vị trí tuyển dụng lập trình JQuery mới tại Topdev.

Từ khóa » Cách Sử Dụng Jquery Ajax