AJAX Sử Dụng JQuery | V1Study

Phương thức load() trong jQuery

load() trong jQuery là phương thức đơn giản nhất để thực thi kỹ thuật ajax, load() có nhiệm vụ hiển thị các dữ liệu được tải xuống vào một phần tử html nào đó.

Cú pháp:

load(url, params, callback)

Trong đó:

- url: là địa chỉ của trang xử lý dữ liệu

- params: là một đối tượng lưu giữ các biến gửi lên server

- callback: là hàm mà jQuery sẽ gọi đến khi quá trình Ajax hoàn thành

Ví dụ 1:

$(document).ready(function() {

$("div#result").load("data.html");

});

Ví dụ trên có nhiệm vụ lấy toàn bộ nội dung trả về trong file data.html và hiển thị dữ liệu đó vào bộ chọn div#result.

Ví dụ 2:

$(function() {

$("div#result").load("data.php", {id: 1}, callback);

});

function callback() {

alert("Tải dữ liệu thành công.");

}

Nội dung file data.php:

if(isset($_POST['id'])) {

echo 'Bạn đã gửi dữ liệu ID = '.$_POST['id'].' thành công';

} else {

echo 'Không có dữ liệu được gửi sang';

}

Trong ví dụ trên, ta thực hiện gửi dữ liệu (id = 1) sang file data.php và hiển thị dữ liệu trả về từ file này vào bộ chọn div#result, khi dữ liệu được tải thành công thì sẽ gọi tới hàm callback.

Phương thức get() trong jQuery

Phương thức get() cho phép ta thực thi ajax bằng cách gửi dữ liệu lên server theo cách thức gửi dữ liệu là GET.

Cú pháp:

get(url, params, callback)

Trong đó:

- url: là địa chỉ của trang xử lý dữ liệu

- params: là một đối tượng lưu giữ các biến gửi lên server

- callback: là hàm mà jQuery sẽ gọi đến khi quá trình ajax hoàn thành.

Ví dụ:

$(function() {

$.get("data1.php", {id: 1},

function(data){

$("div#result").html(data);

});

});

Nội dung file data1.php:

if(isset($_GET['id'])) {

echo 'Bạn đã gửi dữ liệu ID = '.$_GET['id'].' thành công';

} else {

echo 'Không có dữ liệu được gửi sang';

}

Trong ví dụ trên, ta thực hiện gửi dữ liệu (id = 1) sang file data1.php theo cách thức gửi là GET và hiển thị dữ liệu trả về từ file này vào bộ chọn div#result.

Phương thức post() trong jQuery

post() cho phép thực thi ajax bằng cách gửi dữ liệu lên server theo cách thức POST.

Cú pháp:

post(url, params, callback)

Ví dụ:

$(document).ready(function( ){

$.post("data.php", {id: 1},

function(data){

$("div#result").html(data);

});

});

Nội dung file data.php:

if(isset($_POST['id'])) {

echo 'Bạn đã gửi dữ liệu ID = '.$_POST['id'].' thành công';

} else {

echo 'Không có dữ liệu được gửi sang';

}

Trong ví dụ trên, ta thực hiện gửi dữ liệu (id = 1) sang file data.php theo phương thức POST và hiển thị dữ liệu trả về từ file này vào bộ chọn div#result.

Phương thức ajax() trong jQuery

Ngoài các phương thức trình bày ở trên, jQuery còn cung cấp thêm cho ta phương thức ajax() tổng quát. Với phương thức này ta có thể tùy chỉnh cấu hình, thêm bớt các thông số. Ta chỉ cần sử dụng phương thức này là có thể đáp ứng các yêu cầu về thực thi ajax. Để sử dụng phương thức này, ta làm theo cấu trúc mẫu như sau:

$.ajax({ type: 'POST', url: 'data.php', data: { id: "1", email: "hocphp@gmail.com" }, dataType: 'html', success: function(data) { // code here }, error: function() { // code here } });

Trong đó:

- type: Kiểu gửi dữ liệu, có thể là POST hoặc GET, nó giống với thuộc tính method của <form>

- url: Đường dẫn xử lý dữ liệu,nó tương tự như thuộc tính action trong form

- data: Tập hợp các biến dữ liệu gửi lên server

- dataType: Kiểu dữ liệu có thể html, text, json, xml

- success: Hàm chạy khi nhận dữ liệu thành công

- error: Hàm chạy khi có lỗi xảy ra.

Ví dụ 1: dữ liệu trả về dạng html

$.ajax({ type: 'POST', url: 'data.php', data: { id: "1", }, dataType: 'html', success: function(data) { $("div#result").html(data); }, error: function() { alert('Có lỗi trong quá trình xử lý'); } }); File data.php: if(isset($_POST['id'])) { echo 'Bạn đã gửi dữ liệu ID = '.$_POST['id'].' thành công'; } else { echo 'Không có dữ liệu được gửi sang'; }

Ví dụ 2: dữ liệu trả về dạng json

$.ajax({ type: 'POST', url: 'data.php', data: { id: "1", }, dataType: 'json', success: function(data) { if(data.complate == '1') { alert('Có dữ liệu gửi sang'); }else{ alert('Không có dữ liệu gửi sang'); } }, error: function() { alert('Có lỗi trong quá trình xử lý'); } }); File data.php: $data = array(); if(isset($_POST['id'])) { $data['complate'] = '1'; }else{ $data['complate'] = '0'; } echo json_decode($data);