jQuery AJAX là gì? Cách sử dụng $.ajax(), $.get() và $.post()
Bùi Tấn Lực - 106
- 04/09/2026
Trong một website PHP truyền thống, mỗi khi người dùng gửi biểu mẫu, tải dữ liệu hoặc thực hiện một thao tác cần xử lý ở máy chủ, trình duyệt thường phải gửi yêu cầu và tải lại trang. Cách làm này đơn giản nhưng không phải lúc nào cũng mang lại trải nghiệm tốt, đặc biệt với những chức năng cần cập nhật dữ liệu nhanh như tìm kiếm, lọc sản phẩm, kiểm tra thông tin, gửi biểu mẫu hoặc tải thêm nội dung.
jQuery AJAX giải quyết vấn đề đó bằng cách cho phép JavaScript gửi yêu cầu HTTP đến máy chủ mà không nhất thiết phải tải lại toàn bộ trang. Khi kết hợp với PHP, AJAX trở thành một cách khá thuận tiện để xây dựng các chức năng tương tác giữa trình duyệt và máy chủ.
Trong bài viết này, Web Mới sẽ đi từ bản chất của AJAX đến cách sử dụng $.ajax(), sau đó mở rộng sang $.get() và $.post(). Mục tiêu không chỉ là biết cú pháp, mà quan trọng hơn là hiểu khi nào nên dùng từng phương thức, dữ liệu đi qua những bước nào và PHP cần trả về kết quả ra sao.
AJAX trong jQuery thực chất đang làm gì?
AJAX là viết tắt của Asynchronous JavaScript and XML. Tuy nhiên, chữ XML trong tên gọi này dễ khiến người mới hiểu nhầm rằng AJAX bắt buộc phải sử dụng XML. Thực tế hiện nay, dữ liệu trao đổi giữa trình duyệt và máy chủ thường được biểu diễn dưới dạng JSON vì cấu trúc gọn, dễ xử lý và phù hợp với JavaScript.
Điểm quan trọng nhất của AJAX nằm ở chữ asynchronous, tức là JavaScript có thể gửi yêu cầu đến máy chủ mà không cần dừng toàn bộ giao diện để chờ một trang mới được tải.
Có thể hình dung một quy trình đơn giản như sau:
- Người dùng thực hiện một thao tác trên trang web.
- JavaScript phát hiện thao tác đó.
- jQuery tạo một HTTP request gửi đến máy chủ.
- PHP tiếp nhận request và xử lý dữ liệu.
- PHP trả kết quả về trình duyệt.
- JavaScript nhận kết quả và cập nhật phần cần thiết trên giao diện.
Điểm khác biệt nằm ở bước cuối. Thay vì yêu cầu trình duyệt tải lại toàn bộ trang, JavaScript có thể chỉ thay đổi một khu vực nhỏ.
Ví dụ, một trang bán hàng có bộ lọc sản phẩm. Khi người dùng chọn mức giá từ 1 đến 3 triệu đồng, JavaScript có thể gửi thông tin bộ lọc đến PHP. PHP truy vấn cơ sở dữ liệu rồi trả về danh sách sản phẩm phù hợp. JavaScript nhận kết quả và thay phần danh sách sản phẩm hiện tại bằng dữ liệu mới.
Thanh menu, logo, nội dung giới thiệu và các thành phần khác của trang không cần tải lại.
AJAX không phải là một ngôn ngữ riêng
Một hiểu nhầm khá phổ biến là xem AJAX như một ngôn ngữ lập trình. Thực tế, AJAX là một kỹ thuật giao tiếp giữa phía trình duyệt và máy chủ.
Trong một website sử dụng PHP, các thành phần thường tham gia gồm:
- HTML: tạo cấu trúc giao diện.
- JavaScript: phát hiện thao tác và xử lý kết quả.
- jQuery: cung cấp các phương thức giúp viết AJAX ngắn gọn hơn.
- PHP: tiếp nhận request, xử lý nghiệp vụ và truy vấn cơ sở dữ liệu.
- MySQL hoặc hệ quản trị cơ sở dữ liệu khác: lưu trữ và cung cấp dữ liệu cho PHP.
Vì vậy, jQuery AJAX không thay thế PHP. Nó chỉ tạo ra một cách giao tiếp linh hoạt hơn giữa JavaScript ở trình duyệt và PHP ở máy chủ.
Vì sao $.ajax() là phương thức quan trọng nhất?
Nếu chỉ nhìn vào cú pháp, $.get() và $.post() có vẻ dễ sử dụng hơn. Tuy nhiên, $.ajax() mới là phương thức tổng quát và linh hoạt nhất trong nhóm này.
Với $.ajax(), lập trình viên có thể chủ động thiết lập nhiều thành phần của request như:
- URL cần gửi request.
- Phương thức HTTP như GET hoặc POST.
- Dữ liệu gửi lên máy chủ.
- Kiểu dữ liệu mong muốn nhận về.
- Cách xử lý khi request thành công.
- Cách xử lý khi máy chủ trả lỗi.
- Cách xử lý khi request hoàn tất.
- Thời gian chờ request.
- Các HTTP header cần thiết.
Đây là lý do nên học kỹ $.ajax() trước. Khi đã hiểu phương thức này, việc sử dụng $.get() hoặc $.post() sẽ trở nên rất dễ dàng vì bản chất chúng chỉ là những cách viết ngắn gọn hơn cho các nhu cầu phổ biến.
Cú pháp cơ bản của $.ajax()
$.ajax({
url: 'xu-ly.php',
type: 'POST',
data: {
name: 'Nguyen Van A'
},
success: function(response) {
console.log(response);
},
error: function(xhr, status, error) {
console.log(error);
}
});
Đoạn mã trên gửi một request POST đến tệp xu-ly.php. Dữ liệu được gửi đi gồm một trường name. Nếu máy chủ phản hồi thành công, dữ liệu nhận được sẽ đi vào hàm success.
Nếu request gặp lỗi, hàm error có thể được sử dụng để kiểm tra nguyên nhân.
URL quyết định request sẽ đi đâu
Thuộc tính url xác định địa chỉ mà AJAX sẽ gửi request đến.
$.ajax({
url: 'xu-ly.php'
});
Nếu JavaScript và tệp PHP nằm trong những thư mục khác nhau, đường dẫn phải được xác định chính xác.
$.ajax({
url: '/ajax/xu-ly-san-pham.php'
});
Đối với website thực tế, cần đặc biệt chú ý đường dẫn tương đối. Một đoạn JavaScript có thể được gọi từ nhiều URL khác nhau nhưng đường dẫn tương đối lại được trình duyệt tính theo URL hiện tại, không phải theo vị trí vật lý của tệp JavaScript.
Đây là một nguyên nhân khiến AJAX hoạt động bình thường ở một trang nhưng lại báo lỗi 404 khi được sử dụng ở trang khác.
type và method khác nhau thế nào?
Trong nhiều ví dụ jQuery, bạn sẽ gặp thuộc tính type để xác định phương thức HTTP:
$.ajax({
url: 'xu-ly.php',
type: 'POST'
});
Trong những phiên bản và cách viết hiện đại, bạn cũng có thể gặp method. Khi làm việc với mã nguồn cũ hoặc nhiều dự án jQuery khác nhau, việc gặp cả hai tên là bình thường.
Về mặt tư duy lập trình, điều quan trọng không phải ghi nhớ tên thuộc tính trước tiên mà phải xác định request đang thực hiện hành động gì.
GET thường phù hợp khi cần lấy dữ liệu mà không làm thay đổi trạng thái trên máy chủ. POST thường được sử dụng khi gửi dữ liệu để tạo, xử lý hoặc thực hiện một hành động trên máy chủ.
Ví dụ, lấy danh sách bài viết có thể dùng GET:
$.ajax({
url: 'danh-sach-bai-viet.php',
type: 'GET'
});
Trong khi gửi dữ liệu biểu mẫu để PHP xử lý có thể dùng POST:
$.ajax({
url: 'luu-bai-viet.php',
type: 'POST',
data: {
title: 'Bai viet moi'
}
});
Cách gửi dữ liệu từ JavaScript sang PHP bằng $.ajax()
Đây là phần quan trọng nhất khi đưa jQuery AJAX vào một website PHP. JavaScript không trực tiếp thay đổi dữ liệu trong cơ sở dữ liệu. Nó gửi request đến PHP, sau đó PHP mới thực hiện phần xử lý phía máy chủ.
Giả sử JavaScript gửi:
$.ajax({
url: 'kiem-tra.php',
type: 'POST',
data: {
username: 'webmoi'
},
success: function(response) {
console.log(response);
}
});
PHP có thể tiếp nhận dữ liệu bằng biến $_POST:
<?php
$username = $_POST['username'] ?? '';
echo $username;
Ở đây, dữ liệu được truyền từ trình duyệt sang PHP thông qua request POST. PHP đọc giá trị bằng khóa tương ứng.
Nếu JavaScript gửi nhiều trường:
$.ajax({
url: 'kiem-tra.php',
type: 'POST',
data: {
username: 'webmoi',
email: 'example@example.com',
age: 25
},
success: function(response) {
console.log(response);
}
});
PHP có thể lấy từng giá trị:
<?php
$username = $_POST['username'] ?? '';
$email = $_POST['email'] ?? '';
$age = $_POST['age'] ?? '';
echo $username;
echo $email;
echo $age;
Cách này rất hữu ích với các biểu mẫu không muốn tải lại trang. Tuy nhiên, có một nguyên tắc quan trọng: dữ liệu nhận từ trình duyệt không được mặc định là dữ liệu đáng tin cậy.
Việc người dùng gửi dữ liệu bằng AJAX không làm dữ liệu trở nên an toàn hơn. Người dùng vẫn có thể tự tạo request bằng công cụ khác và thay đổi nội dung gửi đến PHP.
Do đó, PHP vẫn phải kiểm tra dữ liệu, xác thực quyền và xử lý các trường hợp không hợp lệ trước khi thực hiện thao tác quan trọng.
data trong $.ajax() hoạt động như thế nào?
Thuộc tính data là nơi khai báo dữ liệu muốn gửi lên máy chủ.
$.ajax({
url: 'xu-ly.php',
type: 'POST',
data: {
name: 'Web Moi',
action: 'save'
}
});
Với cách viết này, jQuery sẽ xử lý object thành dữ liệu phù hợp với request thông thường.
Phía PHP có thể đọc:
<?php
$name = $_POST['name'] ?? '';
$action = $_POST['action'] ?? '';
Một điểm cần chú ý là tên khóa trong JavaScript phải khớp với tên mà PHP đọc. Nếu JavaScript gửi user_name nhưng PHP lại đọc username, PHP sẽ không nhận được giá trị như mong muốn.
Trong dự án thực tế, việc thống nhất tên trường ngay từ đầu giúp giảm đáng kể lỗi khi frontend và backend phát triển riêng.
Gửi dữ liệu từ một form
Thay vì lấy từng input rồi tự tạo object, jQuery có thể hỗ trợ lấy dữ liệu biểu mẫu bằng phương thức serialize().
var formData = $('#contact-form').serialize();
$.ajax({
url: 'xu-ly-lien-he.php',
type: 'POST',
data: formData,
success: function(response) {
console.log(response);
}
});
Ví dụ một biểu mẫu có thể có dạng:
<form id="contact-form">
<input type="text" name="name">
<input type="email" name="email">
<button type="submit">Gửi</button>
</form>
Khi người dùng gửi biểu mẫu, JavaScript có thể lấy toàn bộ các trường có thuộc tính name và gửi chúng trong cùng một request.
Đây là cách khá phù hợp với những form đơn giản như đăng ký nhận thông tin, gửi liên hệ hoặc cập nhật một số thông tin trên trang.
Xử lý dữ liệu PHP trả về cho trình duyệt
Gửi request mới chỉ là một nửa của quá trình. Phần quan trọng tiếp theo là xác định PHP sẽ trả về loại dữ liệu nào và JavaScript sẽ sử dụng dữ liệu đó ra sao.
Có thể trả về một chuỗi đơn giản:
<?php
echo 'Lưu dữ liệu thành công';
JavaScript nhận chuỗi đó:
$.ajax({
url: 'luu-du-lieu.php',
type: 'POST',
data: {
name: 'Web Moi'
},
success: function(response) {
console.log(response);
}
});
Cách này phù hợp với những kết quả rất đơn giản. Nhưng khi một request cần trả về nhiều thông tin, JSON thường là lựa chọn tốt hơn.
Ví dụ PHP trả về:
<?php
$result = [
'success' => true,
'message' => 'Lưu dữ liệu thành công',
'id' => 125
];
header('Content-Type: application/json; charset=utf-8');
echo json_encode($result);
Phía JavaScript có thể yêu cầu jQuery xử lý kết quả như JSON:
$.ajax({
url: 'luu-du-lieu.php',
type: 'POST',
dataType: 'json',
data: {
name: 'Web Moi'
},
success: function(response) {
if (response.success) {
console.log(response.message);
console.log(response.id);
}
}
});
Thuộc tính dataType nói cho jQuery biết kiểu dữ liệu mà JavaScript mong đợi từ máy chủ.
Đây là một chi tiết nhỏ nhưng rất đáng chú ý. Khi PHP được thiết kế để trả JSON, việc khai báo rõ dataType: 'json' giúp code phía JavaScript dễ hiểu hơn và giảm việc phải tự chuyển đổi chuỗi JSON.
Vì sao JSON phù hợp với AJAX và PHP?
JSON có cấu trúc gần với object trong JavaScript, đồng thời PHP cũng có thể tạo JSON tương đối dễ dàng bằng json_encode().
Ví dụ một response có thể chứa trạng thái, thông báo và dữ liệu:
{
"success": true,
"message": "Đã cập nhật",
"data": {
"id": 15,
"name": "Web Moi"
}
}
JavaScript có thể truy cập trực tiếp từng phần:
success: function(response) {
if (response.success) {
console.log(response.message);
console.log(response.data.id);
console.log(response.data.name);
}
}
Cách thiết kế response như vậy đặc biệt hữu ích khi xây dựng website PHP có nhiều thao tác AJAX. Thay vì mỗi chức năng trả về một kiểu dữ liệu khác nhau, backend có thể thống nhất cấu trúc response để frontend xử lý dễ hơn.
success, error và complete khác nhau ở đâu?
Ba callback này thường xuất hiện trong các ví dụ AJAX nhưng có vai trò khác nhau.
success được sử dụng khi request hoàn thành và jQuery xác định response là thành công theo quy trình xử lý của request.
error được sử dụng khi request gặp lỗi HTTP, lỗi mạng hoặc lỗi khiến jQuery không thể xử lý response theo cấu hình đã yêu cầu.
complete được gọi sau khi request kết thúc, bất kể request thành công hay thất bại.
Một ví dụ thực tế:
$.ajax({
url: 'xu-ly.php',
type: 'POST',
data: {
action: 'save'
},
success: function(response) {
console.log('Request thành công');
},
error: function(xhr, status, error) {
console.log('Request thất bại');
},
complete: function() {
console.log('Request đã kết thúc');
}
});
Điều này đặc biệt hữu ích khi giao diện có trạng thái loading. Bạn có thể bật loading trước khi gửi request và tắt nó trong complete để không phải lặp lại đoạn mã tắt loading ở cả success và error.
Đọc thông tin lỗi từ xhr
Khi AJAX thất bại, đừng chỉ ghi ra một thông báo chung chung như “Có lỗi xảy ra”. Trong quá trình phát triển, đối tượng xhr có thể cung cấp thông tin giúp xác định vấn đề.
error: function(xhr, status, error) {
console.log(xhr.status);
console.log(status);
console.log(error);
}
Chẳng hạn, mã trạng thái HTTP 404 thường cho thấy URL không tìm thấy tài nguyên. Mã 500 thường liên quan đến lỗi phía máy chủ. Những thông tin này giúp việc kiểm tra AJAX nhanh hơn nhiều so với chỉ nhìn vào giao diện.
Tuy nhiên, thông tin kỹ thuật chi tiết chỉ nên phục vụ quá trình phát triển và kiểm tra. Khi đưa website lên môi trường thật, thông báo hiển thị cho người dùng nên dễ hiểu và không tiết lộ thông tin nội bộ của hệ thống.
Thiết lập timeout để tránh request chờ quá lâu
Một request AJAX không nên mặc định được xem là sẽ luôn phản hồi nhanh. Máy chủ có thể chậm, mạng có thể không ổn định hoặc một truy vấn cơ sở dữ liệu có thể mất nhiều thời gian.
jQuery cho phép thiết lập thời gian chờ bằng timeout.
$.ajax({
url: 'xu-ly.php',
type: 'POST',
timeout: 10000,
data: {
action: 'load'
},
success: function(response) {
console.log(response);
},
error: function(xhr, status, error) {
if (status === 'timeout') {
console.log('Request đã quá thời gian chờ');
}
}
});
Con số 10000 tương ứng với 10.000 mili giây, tức khoảng 10 giây.
Không nên đặt timeout quá ngắn chỉ để làm giao diện có vẻ nhanh. Nếu hệ thống thực sự cần vài giây để xử lý một nghiệp vụ hợp lệ, timeout quá thấp sẽ khiến trình duyệt báo lỗi trong khi PHP vẫn đang thực hiện công việc.
Ngược lại, timeout quá dài cũng khiến người dùng phải chờ lâu trước khi biết request có vấn đề.
Một request AJAX tốt cần phân biệt giao diện và xử lý máy chủ
AJAX thường bị viết theo kiểu: người dùng bấm nút, JavaScript gửi request, PHP xử lý rồi trả về một chuỗi. Cách này có thể chạy được nhưng sẽ nhanh chóng trở nên khó bảo trì khi chức năng phát triển.
Một cấu trúc tốt hơn là phân chia trách nhiệm:
- JavaScript chịu trách nhiệm nhận thao tác từ người dùng.
- AJAX chịu trách nhiệm giao tiếp với máy chủ.
- PHP chịu trách nhiệm xác thực và xử lý nghiệp vụ.
- Cơ sở dữ liệu chịu trách nhiệm lưu trữ và truy xuất dữ liệu.
- Response có cấu trúc rõ ràng để JavaScript quyết định cách cập nhật giao diện.
Ví dụ, khi người dùng nhấn nút xóa một bản ghi, JavaScript không nên tự kết luận rằng bản ghi đã bị xóa chỉ vì request đã được gửi đi.
Trình tự hợp lý là:
- JavaScript gửi yêu cầu xóa.
- PHP kiểm tra người dùng có quyền xóa hay không.
- PHP kiểm tra dữ liệu nhận được.
- PHP thực hiện thao tác với cơ sở dữ liệu.
- PHP trả về kết quả.
- JavaScript chỉ xóa phần tử khỏi giao diện nếu máy chủ xác nhận thao tác thành công.
Đây là nguyên tắc rất quan trọng khi xây dựng website PHP bằng AJAX. Giao diện không được xem là nguồn xác nhận cuối cùng của một thao tác. Máy chủ mới là nơi quyết định thao tác có thực sự thành công hay không.
Những lỗi thường gặp khi mới sử dụng $.ajax()
URL sai nhưng chỉ nhìn vào JavaScript
Đoạn JavaScript có thể hoàn toàn đúng cú pháp nhưng request vẫn thất bại vì URL trỏ sai tệp PHP.
Khi gặp trường hợp này, nên kiểm tra request trong công cụ dành cho nhà phát triển của trình duyệt thay vì sửa JavaScript một cách ngẫu nhiên.
PHP có lỗi nhưng frontend chỉ nhận thông báo chung
Một request POST có thể được gửi chính xác nhưng PHP gặp lỗi khi truy vấn cơ sở dữ liệu. Nếu frontend chỉ hiển thị “Thất bại”, việc tìm nguyên nhân sẽ khó hơn.
Trong quá trình phát triển, nên kiểm tra HTTP status, response và log phía máy chủ.
PHP trả JSON nhưng response không phải JSON hợp lệ
Đây là lỗi khá phổ biến khi sử dụng dataType: 'json'.
Chỉ cần PHP vô tình xuất thêm một đoạn text, warning hoặc thông tin không mong muốn trước JSON, response có thể không còn là JSON hợp lệ.
Ví dụ, khi PHP dự kiến trả:
{"success":true}
nhưng thực tế response lại chứa thêm nội dung lỗi phía trước, JavaScript có thể không phân tích được response như JSON.
Vì vậy, endpoint dùng để trả JSON nên được thiết kế để response có cấu trúc rõ ràng và tránh việc xuất dữ liệu ngoài dự kiến.
Chỉ kiểm tra dữ liệu ở JavaScript
JavaScript có thể kiểm tra email, số lượng, độ dài chuỗi hoặc trạng thái của biểu mẫu trước khi gửi request. Điều đó tốt cho trải nghiệm người dùng nhưng không đủ để bảo vệ hệ thống.
PHP vẫn phải kiểm tra lại toàn bộ dữ liệu quan trọng vì request có thể được gửi trực tiếp đến endpoint mà không thông qua giao diện website.
Đây là điểm cần đặc biệt ghi nhớ khi AJAX được dùng cho các chức năng đăng nhập, cập nhật tài khoản, xóa dữ liệu, đặt hàng hoặc những thao tác yêu cầu quyền truy cập.
Khi nào nên dùng $.get() thay cho $.ajax()?
Nếu nhu cầu chỉ đơn giản là gửi một request GET để lấy dữ liệu, viết toàn bộ cấu hình bằng $.ajax() đôi khi không cần thiết. jQuery cung cấp $.get() để rút gọn trường hợp phổ biến này.
Cú pháp cơ bản:
$.get('danh-sach.php', function(response) {
console.log(response);
});
Đoạn mã trên gửi một request GET đến danh-sach.php. Khi máy chủ trả kết quả, dữ liệu được truyền vào hàm callback.
So với $.ajax(), cách viết này ngắn hơn đáng kể. Điều đó làm cho $.get() phù hợp với những request đơn giản, nơi bạn không cần thiết lập quá nhiều tùy chọn.
Truyền tham số bằng $.get()
$.get() cũng có thể gửi dữ liệu thông qua query string. Ví dụ cần lấy thông tin của một bài viết có ID là 25:
$.get('bai-viet.php', {
id: 25
}, function(response) {
console.log(response);
});
jQuery sẽ tạo request tương đương với việc gửi tham số id=25 trong URL.
PHP có thể đọc giá trị này bằng $_GET:
<?php
$id = $_GET['id'] ?? '';
echo $id;
Đây là mô hình rất phù hợp với các chức năng chỉ đọc dữ liệu, chẳng hạn lấy thông tin một sản phẩm, tải danh sách bài viết theo trang hoặc lấy nội dung theo một mã định danh.
Yêu cầu JSON bằng $.get()
Nếu PHP trả về JSON, có thể chỉ định kiểu dữ liệu mong muốn ở tham số cuối:
$.get('danh-sach.php', {
category: 10
}, function(response) {
console.log(response);
}, 'json');
Khi đó, jQuery sẽ xử lý response theo kiểu JSON thay vì coi nó đơn thuần là một chuỗi văn bản.
PHP có thể tạo response:
<?php
$data = [
'success' => true,
'message' => 'Lấy dữ liệu thành công'
];
header('Content-Type: application/json; charset=utf-8');
echo json_encode($data);
JavaScript có thể sử dụng trực tiếp các thuộc tính của kết quả:
$.get('danh-sach.php', function(response) {
if (response.success) {
console.log(response.message);
}
}, 'json');
Trong những chức năng nhỏ, cách viết này khá gọn. Tuy nhiên, khi request bắt đầu cần timeout, xử lý nhiều trạng thái, header hoặc các tùy chọn nâng cao, chuyển sang $.ajax() thường sẽ dễ kiểm soát hơn.
$.post() phù hợp với những thao tác gửi dữ liệu
$.post() có cách sử dụng gần giống $.get(), nhưng được thiết kế cho request POST.
Ví dụ đơn giản:
$.post('luu-thong-tin.php', {
name: 'Web Moi'
}, function(response) {
console.log(response);
});
Phía PHP tiếp nhận dữ liệu thông qua $_POST:
<?php
$name = $_POST['name'] ?? '';
echo 'Xin chao ' . $name;
Đây là một trong những cách nhanh nhất để tạo một chức năng AJAX đơn giản bằng jQuery và PHP.
Ví dụ, một nút trên trang có thể gửi thông tin mà không cần tải lại toàn bộ trang:
$('#save-button').on('click', function() {
$.post('luu-thong-tin.php', {
name: 'Web Moi'
}, function(response) {
console.log(response);
});
});
Người dùng bấm nút, JavaScript gửi request, PHP xử lý rồi trả kết quả. Trang hiện tại vẫn được giữ nguyên trong suốt quá trình đó.
Gửi nhiều dữ liệu bằng $.post()
Không chỉ gửi một giá trị, $.post() có thể truyền nhiều trường cùng lúc:
$.post('luu-khach-hang.php', {
name: 'Nguyen Van A',
email: 'example@example.com',
phone: '0900000000'
}, function(response) {
console.log(response);
});
PHP tiếp nhận từng trường:
<?php
$name = $_POST['name'] ?? '';
$email = $_POST['email'] ?? '';
$phone = $_POST['phone'] ?? '';
Trong website thực tế, PHP không nên chỉ nhận các giá trị rồi lưu ngay vào cơ sở dữ liệu. Backend cần kiểm tra dữ liệu trước khi thực hiện thao tác.
Chẳng hạn, email có thể được kiểm tra định dạng, số điện thoại có thể được chuẩn hóa, trường bắt buộc phải được kiểm tra rỗng và những giá trị không nằm trong phạm vi cho phép phải bị từ chối.
So sánh $.ajax(), $.get() và $.post() để chọn đúng cách
Cả ba đều phục vụ giao tiếp AJAX nhưng không có nghĩa chúng nên được sử dụng tùy ý.
| Phương thức | Mục đích phù hợp | Mức độ tùy biến |
|---|---|---|
| $.ajax() | Request cần nhiều cấu hình và kiểm soát | Cao |
| $.get() | Lấy dữ liệu bằng GET với cấu hình đơn giản | Thấp đến vừa |
| $.post() | Gửi dữ liệu bằng POST với cấu hình đơn giản | Thấp đến vừa |
Có thể áp dụng một nguyên tắc đơn giản:
- Nếu chỉ cần lấy dữ liệu bằng GET và request rất đơn giản, $.get() thường là đủ.
- Nếu chỉ cần gửi dữ liệu bằng POST và không cần nhiều tùy chọn, $.post() giúp code ngắn gọn.
- Nếu cần kiểm soát chi tiết request hoặc muốn một cấu trúc thống nhất cho nhiều loại request, $.ajax() là lựa chọn linh hoạt hơn.
Không có phương thức nào luôn luôn tốt hơn hai phương thức còn lại. Vấn đề nằm ở việc chọn công cụ phù hợp với độ phức tạp của chức năng.
Xây dựng một chức năng AJAX hoàn chỉnh với PHP
Để thấy rõ cách các thành phần kết nối với nhau, hãy xét một ví dụ nhỏ: người dùng nhập tên và bấm nút lưu. JavaScript gửi tên đến PHP, PHP xử lý rồi trả về JSON.
Phần HTML có thể đơn giản như sau:
<input type="text" id="name" name="name">
<button type="button" id="save-button">Lưu</button>
<div id="message"></div>
JavaScript sử dụng $.post():
$('#save-button').on('click', function() {
var name = $('#name').val();
$.post('luu-ten.php', {
name: name
}, function(response) {
if (response.success) {
$('#message').text(response.message);
} else {
$('#message').text(response.message);
}
}, 'json');
});
PHP xử lý request:
<?php
$name = trim($_POST['name'] ?? '');
if ($name === '') {
header('Content-Type: application/json; charset=utf-8');
echo json_encode([
'success' => false,
'message' => 'Vui lòng nhập tên'
]);
exit;
}
header('Content-Type: application/json; charset=utf-8');
echo json_encode([
'success' => true,
'message' => 'Đã tiếp nhận thông tin'
]);
Ở ví dụ này, JavaScript không tự quyết định rằng dữ liệu đã được lưu thành công. Nó chờ PHP trả về trạng thái success.
Đây là cách tư duy nên áp dụng cho các chức năng AJAX có xử lý nghiệp vụ. Trình duyệt chỉ gửi yêu cầu và hiển thị kết quả; quyết định cuối cùng thuộc về backend.
Không nên để response chỉ là một câu thông báo
Với chức năng rất đơn giản, PHP có thể chỉ trả về một chuỗi. Nhưng khi hệ thống phát triển, response dạng JSON có cấu trúc thường dễ mở rộng hơn.
Thay vì:
Lưu thành công
Có thể thiết kế:
{
"success": true,
"message": "Lưu thành công",
"data": {
"id": 125
}
}
Khi đó frontend có thể biết không chỉ thao tác thành công hay thất bại mà còn nhận được dữ liệu liên quan.
Ví dụ sau khi PHP tạo một bản ghi mới, nó có thể trả ID của bản ghi. JavaScript sử dụng ID đó để cập nhật giao diện hoặc thực hiện những thao tác tiếp theo mà không cần tải lại trang.
Ngăn form tải lại trang khi sử dụng AJAX
Một tình huống rất thường gặp là AJAX được dùng để xử lý một biểu mẫu nhưng sau khi bấm nút, trình duyệt vẫn tải lại trang.
Nguyên nhân là hành vi mặc định của form vẫn đang được thực hiện.
Ví dụ:
$('#contact-form').on('submit', function(event) {
event.preventDefault();
var formData = $(this).serialize();
$.post('xu-ly-lien-he.php', formData, function(response) {
console.log(response);
});
});
event.preventDefault() ngăn hành động submit mặc định của trình duyệt. Sau đó JavaScript mới chủ động gửi dữ liệu bằng AJAX.
Đây là một chi tiết rất quan trọng khi xây dựng form AJAX. Nếu quên bước này, bạn có thể thấy request AJAX xuất hiện nhưng trang vẫn chuyển hướng hoặc tải lại ngay sau đó, khiến trải nghiệm không đúng như mong muốn.
Chỉ gửi những trường có name
Khi sử dụng serialize(), cần nhớ rằng dữ liệu biểu mẫu được lấy dựa trên các trường phù hợp, đặc biệt là thuộc tính name.
Ví dụ:
<form id="register-form">
<input type="text" name="username">
<input type="email" name="email">
<input type="password" name="password">
</form>
JavaScript:
var data = $('#register-form').serialize();
$.post('dang-ky.php', data, function(response) {
console.log(response);
}, 'json');
PHP có thể nhận các trường tương ứng bằng:
<?php
$username = $_POST['username'] ?? '';
$email = $_POST['email'] ?? '';
$password = $_POST['password'] ?? '';
Nếu một input không có thuộc tính name, đừng mặc định rằng serialize() sẽ gửi giá trị đó lên PHP.
AJAX không đồng nghĩa với việc mọi thao tác đều phải dùng POST
Một quan niệm khác dễ dẫn đến thiết kế không hợp lý là sử dụng POST cho tất cả request AJAX vì POST được xem là “an toàn hơn”. Hai phương thức này có mục đích khác nhau và không nên lựa chọn chỉ dựa trên cảm giác an toàn.
Nếu request chỉ lấy dữ liệu, GET thường phù hợp hơn:
$.get('san-pham.php', {
id: 20
}, function(response) {
console.log(response);
}, 'json');
Nếu request thực hiện một hành động gửi dữ liệu lên server, POST thường phù hợp:
$.post('cap-nhat-san-pham.php', {
id: 20,
name: 'San pham moi'
}, function(response) {
console.log(response);
}, 'json');
Việc chọn đúng HTTP method giúp API phía PHP dễ hiểu hơn, đồng thời thuận lợi khi mở rộng hệ thống về sau.
Luồng xử lý thực tế từ trình duyệt đến PHP
Để sử dụng AJAX hiệu quả, thay vì học thuộc từng đoạn code, nên hình dung toàn bộ request như một chuỗi liên tục.
- Người dùng thao tác trên giao diện.
- JavaScript bắt sự kiện.
- jQuery tạo request AJAX.
- Trình duyệt gửi request đến endpoint PHP.
- PHP đọc dữ liệu từ GET hoặc POST.
- PHP xác thực và xử lý nghiệp vụ.
- PHP có thể truy vấn hoặc cập nhật cơ sở dữ liệu.
- PHP tạo response.
- JavaScript nhận response.
- Giao diện được cập nhật dựa trên kết quả thực tế.
Nếu một chức năng AJAX không hoạt động, hãy kiểm tra theo chính chuỗi này. Cách kiểm tra tuần tự sẽ hiệu quả hơn việc chỉ nhìn vào đoạn JavaScript.
Ví dụ, nếu PHP không nhận được dữ liệu, vấn đề có thể nằm ở tên field hoặc method. Nếu PHP xử lý đúng nhưng JavaScript không nhận được JSON, cần kiểm tra response. Nếu response đúng nhưng giao diện không thay đổi, vấn đề có thể nằm ở đoạn JavaScript cập nhật DOM.
Nhìn AJAX theo toàn bộ luồng như vậy sẽ giúp việc sửa lỗi nhanh hơn và đặc biệt hữu ích khi xây dựng website PHP có nhiều chức năng tương tác.
Bảo mật khi sử dụng AJAX với PHP
AJAX không tạo ra một lớp bảo mật đặc biệt cho website. Request được gửi bằng JavaScript vẫn có thể bị người dùng quan sát, thay đổi hoặc tự tạo lại bên ngoài giao diện. Vì vậy, mọi endpoint PHP nhận request AJAX đều phải được bảo vệ giống như bất kỳ endpoint xử lý HTTP nào khác.
Đây là điểm rất quan trọng: không được xem việc ẩn nút hoặc kiểm tra dữ liệu bằng JavaScript là biện pháp bảo mật. JavaScript chạy ở phía trình duyệt nên người dùng hoàn toàn có thể bỏ qua nó.
PHP phải tự kiểm tra dữ liệu
Giả sử giao diện chỉ cho phép người dùng chọn một ID từ danh sách. JavaScript có thể gửi:
$.post('xoa-bai-viet.php', {
id: 25
}, function(response) {
console.log(response);
}, 'json');
PHP không nên mặc định rằng ID 25 là hợp lệ chỉ vì request được gửi từ website. Backend cần kiểm tra dữ liệu nhận được trước khi thực hiện thao tác.
<?php
$id = filter_input(INPUT_POST, 'id', FILTER_VALIDATE_INT);
if (!$id) {
header('Content-Type: application/json; charset=utf-8');
echo json_encode([
'success' => false,
'message' => 'Dữ liệu không hợp lệ'
]);
exit;
}
Nếu thao tác yêu cầu người dùng đăng nhập, PHP cũng phải kiểm tra phiên đăng nhập và quyền tương ứng. Không nên chỉ ẩn nút trên giao diện đối với những người không có quyền.
Chống CSRF cho request thay đổi dữ liệu
Với những website có đăng nhập và sử dụng session, các request AJAX thực hiện thao tác thay đổi dữ liệu nên được cân nhắc bảo vệ bằng cơ chế chống CSRF.
Ý tưởng cơ bản là máy chủ tạo một token gắn với phiên làm việc. Trình duyệt gửi token đó cùng request, sau đó PHP kiểm tra token trước khi chấp nhận thao tác.
Ví dụ JavaScript gửi token:
$.post('cap-nhat.php', {
id: 25,
name: 'Ten moi',
csrf_token: csrfToken
}, function(response) {
console.log(response);
}, 'json');
PHP phải xác minh token trước khi thực hiện hành động quan trọng. Cách triển khai token cụ thể phụ thuộc vào kiến trúc của website, nhưng nguyên tắc không thay đổi: request thay đổi dữ liệu phải được máy chủ xác thực nguồn yêu cầu phù hợp với phiên người dùng.
Xử lý lỗi AJAX đúng thay vì chỉ thông báo thất bại
Một hệ thống AJAX tốt cần phân biệt ít nhất hai loại lỗi: lỗi giao tiếp giữa trình duyệt và máy chủ, và lỗi nghiệp vụ do dữ liệu hoặc điều kiện xử lý không phù hợp.
Ví dụ, người dùng gửi biểu mẫu nhưng email không hợp lệ. Đây không nhất thiết là lỗi máy chủ. PHP có thể trả về một response JSON cho biết dữ liệu không hợp lệ:
{
"success": false,
"message": "Email không hợp lệ"
}
Trong khi đó, nếu máy chủ gặp lỗi nghiêm trọng, request có thể trả về HTTP status phù hợp và frontend xử lý theo hướng khác.
JavaScript có thể viết:
$.ajax({
url: 'xu-ly.php',
type: 'POST',
dataType: 'json',
data: {
email: $('#email').val()
},
success: function(response) {
if (response.success) {
$('#message').text(response.message);
} else {
$('#message').text(response.message);
}
},
error: function(xhr) {
$('#message').text('Không thể kết nối đến máy chủ.');
console.log(xhr.status);
}
});
Cách này giúp phân biệt việc PHP chủ động trả về một kết quả nghiệp vụ với trường hợp request thực sự gặp sự cố.
Không nên dùng HTTP 200 cho mọi loại lỗi
Trong những hệ thống đơn giản, PHP thường trả HTTP 200 cho mọi response rồi đặt success: false nếu có lỗi. Cách này vẫn có thể hoạt động nhưng không phải lúc nào cũng phản ánh đúng bản chất của request.
Ví dụ, dữ liệu gửi lên không hợp lệ, người dùng chưa đăng nhập hoặc tài nguyên không tồn tại có thể được biểu diễn bằng các HTTP status phù hợp. Khi đó frontend có thêm thông tin để quyết định cách xử lý.
Điều quan trọng là dự án nên thống nhất cách sử dụng HTTP status và cấu trúc JSON thay vì mỗi endpoint xử lý theo một kiểu.
Kiểm soát trạng thái loading khi gửi request
AJAX giúp trang không cần tải lại nhưng điều đó không có nghĩa là người dùng biết request đang được xử lý. Nếu bấm nút mà giao diện hoàn toàn không thay đổi trong vài giây, người dùng có thể bấm nhiều lần và vô tình tạo ra nhiều request.
Một cách đơn giản là thay đổi trạng thái nút trong lúc request đang thực hiện.
$('#save-button').on('click', function() {
var button = $(this);
button.prop('disabled', true);
$.post('luu-du-lieu.php', {
name: $('#name').val()
}, function(response) {
console.log(response);
}, 'json')
.always(function() {
button.prop('disabled', false);
});
});
Việc khóa nút trong thời gian ngắn giúp giảm nguy cơ người dùng vô tình gửi cùng một request nhiều lần.
Tuy nhiên, đây chỉ là giải pháp phía giao diện. Backend vẫn phải có khả năng xử lý request trùng nếu nghiệp vụ yêu cầu tính chính xác cao, chẳng hạn tạo đơn hàng hoặc ghi nhận thanh toán.
Tránh gửi nhiều request không cần thiết
AJAX rất tiện nên đôi khi lập trình viên dễ lạm dụng nó. Một thao tác nhỏ trên giao diện không nhất thiết phải tạo một request mới đến PHP.
Ví dụ với ô tìm kiếm, nếu gửi request sau mỗi lần người dùng gõ một ký tự thì một từ khóa dài có thể tạo ra rất nhiều request liên tiếp.
Thay vì gửi ngay lập tức, có thể chờ người dùng ngừng nhập trong một khoảng thời gian ngắn rồi mới gửi request.
var timer;
$('#keyword').on('input', function() {
var keyword = $(this).val();
clearTimeout(timer);
timer = setTimeout(function() {
$.get('tim-kiem.php', {
keyword: keyword
}, function(response) {
console.log(response);
}, 'json');
}, 400);
});
Với cách này, nếu người dùng gõ liên tục, request sẽ được trì hoãn. Chỉ khi họ dừng nhập khoảng 400 mili giây thì request mới được gửi.
Đây là một kỹ thuật đơn giản nhưng có thể giảm đáng kể số lượng request trong các chức năng tìm kiếm, gợi ý hoặc lọc dữ liệu.
Đừng để AJAX trở thành điểm nghẽn của website
AJAX chỉ thay đổi cách trình duyệt giao tiếp với máy chủ. Nó không tự làm PHP hoặc cơ sở dữ liệu nhanh hơn.
Nếu một request AJAX gọi PHP và PHP thực hiện một truy vấn cơ sở dữ liệu rất nặng, người dùng vẫn phải chờ. Việc trang không tải lại không đồng nghĩa với việc backend đã hoạt động hiệu quả.
Khi một AJAX request chậm, cần kiểm tra cả chuỗi xử lý:
- JavaScript có gửi quá nhiều request không?
- Endpoint PHP có thực hiện công việc không cần thiết không?
- Truy vấn cơ sở dữ liệu có được tối ưu không?
- Dữ liệu trả về có lớn hơn mức cần thiết không?
- Frontend có đang xử lý một lượng dữ liệu quá lớn không?
Ví dụ, nếu giao diện chỉ cần tên và ID sản phẩm thì PHP không nhất thiết phải trả về hàng chục trường dữ liệu khác.
Response nhỏ hơn sẽ giúp giảm dữ liệu truyền qua mạng và frontend cũng dễ xử lý hơn.
Tổ chức endpoint PHP để AJAX dễ bảo trì
Khi website có vài chức năng AJAX, việc đặt mỗi thao tác vào một tệp PHP riêng có thể vẫn đơn giản. Nhưng khi số lượng chức năng tăng lên, cấu trúc tùy tiện sẽ nhanh chóng trở thành vấn đề.
Một endpoint nên có trách nhiệm rõ ràng. Chẳng hạn một endpoint chuyên xử lý thông tin khách hàng không nên đồng thời chứa hàng loạt logic không liên quan đến sản phẩm, bài viết hoặc đơn hàng.
Ở phía JavaScript, cũng nên tránh lặp lại cùng một đoạn cấu hình AJAX quá nhiều lần.
Ví dụ thay vì mỗi request đều tự xử lý thông báo lỗi theo một cách khác nhau, dự án có thể thống nhất cấu trúc response:
{
"success": true,
"message": "Thao tác thành công",
"data": {}
}
Khi thất bại:
{
"success": false,
"message": "Không thể thực hiện thao tác",
"data": {}
}
Khi frontend và backend thống nhất một quy ước, việc mở rộng website sẽ dễ dàng hơn rất nhiều.
Tách xử lý giao diện khỏi xử lý request
Một đoạn JavaScript khó bảo trì thường có xu hướng trộn tất cả mọi thứ vào cùng một callback: lấy dữ liệu, gửi AJAX, xử lý response, thay đổi nhiều thành phần giao diện và hiển thị thông báo.
Với chức năng lớn, nên chia nhỏ trách nhiệm để từng phần có nhiệm vụ rõ ràng.
Ví dụ, hàm gửi dữ liệu chỉ tập trung vào request, trong khi một hàm khác đảm nhận việc hiển thị kết quả. Cách tổ chức này giúp khi backend thay đổi response, lập trình viên không phải sửa một đoạn code quá lớn.
Khi nào $.ajax() là lựa chọn tốt hơn $.get() và $.post()?
Ở những chức năng đơn giản, $.get() và $.post() giúp code ngắn và dễ đọc. Nhưng khi yêu cầu tăng lên, $.ajax() thường phù hợp hơn vì có thể cấu hình chi tiết.
Ví dụ một request cần đồng thời xác định method, URL, dữ liệu, kiểu response, timeout và các callback:
$.ajax({
url: 'cap-nhat-thong-tin.php',
type: 'POST',
dataType: 'json',
timeout: 10000,
data: {
id: 25,
name: 'Web Moi'
},
success: function(response) {
if (response.success) {
console.log(response.message);
}
},
error: function(xhr, status) {
if (status === 'timeout') {
console.log('Request quá thời gian chờ');
} else {
console.log('Request thất bại');
}
},
complete: function() {
console.log('Đã hoàn tất request');
}
});
Việc sử dụng $.ajax() trong trường hợp này làm cấu hình request trở nên minh bạch. Khi cần thay đổi hành vi, lập trình viên cũng có sẵn các tùy chọn để kiểm soát.
Những trường hợp không nên cố dùng AJAX
AJAX rất hữu ích nhưng không phải chức năng nào cũng cần AJAX.
Nếu một trang chỉ đơn giản là chuyển người dùng sang một URL khác, việc tạo AJAX request rồi xử lý chuyển hướng có thể làm code phức tạp không cần thiết.
Tương tự, nếu người dùng cần tải một trang hoàn toàn mới với lượng nội dung lớn, cơ chế điều hướng thông thường đôi khi lại phù hợp hơn.
AJAX phát huy giá trị rõ nhất khi chỉ một phần dữ liệu hoặc giao diện cần thay đổi trong khi phần còn lại của trang vẫn có thể giữ nguyên.
Vì vậy, mục tiêu không phải biến toàn bộ website thành một hệ thống AJAX. Mục tiêu là sử dụng AJAX ở đúng nơi nó giải quyết được một vấn đề cụ thể.
AJAX và PHP nên được thiết kế như một luồng dữ liệu rõ ràng
Một chức năng AJAX tốt không nằm ở việc đoạn JavaScript càng ngắn càng tốt. Điều quan trọng hơn là dữ liệu đi qua hệ thống theo một quy trình có thể dự đoán được.
- Giao diện thu thập dữ liệu người dùng.
- JavaScript kiểm tra những lỗi cơ bản để phản hồi nhanh.
- jQuery gửi request đến đúng endpoint.
- PHP xác thực request và dữ liệu.
- PHP kiểm tra quyền truy cập nếu chức năng yêu cầu đăng nhập.
- PHP xử lý nghiệp vụ và làm việc với cơ sở dữ liệu khi cần.
- PHP trả response có cấu trúc nhất quán.
- JavaScript kiểm tra kết quả từ máy chủ.
- Giao diện chỉ được cập nhật khi kết quả phù hợp.
Khi thiết kế được luồng này ngay từ đầu, việc thêm chức năng mới sẽ dễ hơn nhiều. Ví dụ một chức năng cập nhật trạng thái, xóa dữ liệu hoặc tải thêm nội dung đều có thể tuân theo cùng một nguyên tắc.
Những điểm cần nhớ khi làm jQuery AJAX với PHP
Nếu chỉ cần ghi nhớ những nguyên tắc quan trọng nhất, có thể cô đọng việc sử dụng jQuery AJAX thành những điểm sau:
- $.ajax() là phương thức tổng quát và có khả năng tùy biến cao.
- $.get() phù hợp với những request GET đơn giản.
- $.post() phù hợp với những request POST đơn giản.
- GET thường dùng để lấy dữ liệu; POST thường dùng khi gửi dữ liệu hoặc thực hiện thao tác trên máy chủ.
- PHP phải tự xác thực dữ liệu, không được tin tưởng dữ liệu chỉ vì nó đến từ AJAX.
- JSON là lựa chọn thuận tiện khi response cần chứa nhiều thông tin.
- JavaScript không phải nơi quyết định cuối cùng một thao tác có thành công hay không.
- Form AJAX cần ngăn hành vi submit mặc định nếu không muốn trình duyệt tải lại trang.
- Request có thể thất bại dù JavaScript không có lỗi cú pháp, vì vậy cần kiểm tra cả HTTP response và PHP.
- Không nên gửi quá nhiều request chỉ vì AJAX khiến việc gửi request trở nên dễ dàng.
- Các thao tác quan trọng cần được bảo vệ ở phía máy chủ, bao gồm xác thực quyền và cơ chế chống CSRF khi phù hợp.
- Không phải chức năng nào cũng cần AJAX; chỉ nên sử dụng khi nó thực sự cải thiện cách người dùng tương tác với website.
Kết luận
jQuery AJAX là một cách tiếp cận thực tế để kết nối JavaScript với PHP mà không phải tải lại toàn bộ trang sau mỗi thao tác. Trong đó, $.ajax() cung cấp khả năng kiểm soát rộng nhất, còn $.get() và $.post() giúp rút gọn những request phổ biến.
Điều quan trọng nhất khi sử dụng AJAX không phải là ghi nhớ thật nhiều cú pháp. Người lập trình cần hiểu rõ request bắt đầu từ đâu, dữ liệu được gửi như thế nào, PHP xử lý ra sao, response có cấu trúc gì và giao diện dựa vào kết quả đó để thay đổi như thế nào.
Đối với một website PHP thực tế, AJAX chỉ là phần giao tiếp. Phần quyết định chất lượng của hệ thống vẫn nằm ở cách tổ chức backend, kiểm tra dữ liệu, phân quyền, bảo mật, truy vấn cơ sở dữ liệu và thiết kế response.
Khi những phần này được xây dựng thống nhất, jQuery AJAX có thể trở thành một lớp kết nối rất hiệu quả cho các chức năng tương tác như biểu mẫu, tìm kiếm, lọc dữ liệu, tải nội dung, cập nhật trạng thái và nhiều thao tác khác mà không cần bắt người dùng tải lại toàn bộ trang.
Với Web Mới, cách tiếp cận phù hợp là sử dụng AJAX như một công cụ để giải quyết đúng nhu cầu của từng chức năng, thay vì lạm dụng nó cho mọi thao tác trên website. Một đoạn code ngắn chưa chắc là đoạn code tốt; đoạn code tốt là đoạn dễ hiểu, an toàn, có thể kiểm soát lỗi và tiếp tục mở rộng khi website phát triển.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
