Tiếng Việt

Hướng dẫn Laravel

Tiếng Việt (vi)

Laravel - Ajax: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn future Laravel developers! Tôi rất vui mừng được dẫn các bạn vào thế giới kỳ diệu của Laravel và Ajax. Là một người đã dạy khoa học máy tính trong nhiều năm, tôi có thể告诉 bạn rằng việc thành thạo chủ đề này sẽ mở ra một thế giới mới đầy khả năng trong sự nghiệp phát triển web của bạn. Hãy cùng nhau khám phá nhé!

Laravel - Ajax

Ajax là gì?

Trước khi chúng ta nhảy vào các chi tiết cụ thể của Laravel, hãy hiểu rõ Ajax là gì. Ajax viết tắt của Asynchronous JavaScript and XML. Đừng lo lắng nếu điều này听起来 phức tạp - tôi nhớ khi lần đầu tiên tôi nghe thấy, tôi nghĩ rằng đó là một loại sản phẩm làm sạch!

Trong ngôn ngữ đơn giản, Ajax cho phép các trang web cập nhật nội dung một cách động mà không cần tải lại toàn bộ trang. Đó như một phép màu - nhưng tốt hơn, vì bạn sắp biết cách nó hoạt động!

Tại sao sử dụng Ajax trong Laravel?

Laravel, khung công tác PHP mà chúng ta yêu thích, hoạt động rất tốt với Ajax. Nó cho phép chúng ta tạo ra các ứng dụng web mượt mà, phản hồi nhanh, cảm giác như ứng dụng máy tính để bàn. Hãy tưởng tượng nhấp vào một nút và thấy kết quả ngay lập tức mà không cần phải chờ đợi trang tải lại. Đó là sức mạnh của Ajax trong Laravel!

Thiết lập Laravel cho Ajax

Thứ nhất, hãy chắc chắn rằng dự án Laravel của chúng ta sẵn sàng cho hành động Ajax.

  1. Tạo một dự án Laravel mới (nếu bạn chưa làm):
composer create-project --prefer-dist laravel/laravel ajax-tutorial
  1. Đi tới thư mục dự án của bạn:
cd ajax-tutorial
  1. Đảm bảo bạn đã thiết lập cơ sở dữ liệu và cấu hình trong tệp .env.

Hàm json(): Người bạn mới của bạn

Bây giờ, hãy nói về ngôi sao của chúng ta: hàm json(). Hàm nhỏ bé này là điều làm cho Ajax trong Laravel trở nên mượt mà và dễ dàng.

Cú pháp của hàm json()

Dưới đây là cú pháp cơ bản:

return response()->json($data, $status_code);

Hãy phân tích điều này:

  • $data: Đây là dữ liệu bạn muốn gửi trả lại cho client. Nó có thể là một mảng, một đối tượng, hoặc thậm chí là một bộ sưu tập Laravel.
  • $status_code: Đây là tùy chọn. Đây là mã trạng thái HTTP bạn muốn gửi kèm với phản hồi (ví dụ: 200 cho thành công, 404 cho không tìm thấy).

Sử dụng json() vào thực tế

Hãy tạo một ví dụ đơn giản để xem json() trong hành động. Chúng ta sẽ tạo một route trả về phản hồi JSON.

  1. Mở tệp routes/web.php và thêm route này:
Route::get('/greeting', function () {
$data = ['message' => 'Hello, Ajax!'];
return response()->json($data);
});
  1. Bây giờ, nếu bạn truy cập /greeting trong trình duyệt, bạn sẽ thấy phản hồi JSON:
{"message":"Hello, Ajax!"}

Thật thú vị, phải không? Nhưng đợi đã, còn nhiều hơn nữa!

Ví dụ thực tế: Tìm kiếm người dùng động

Hãy tạo một tính năng tìm kiếm người dùng cập nhật kết quả khi bạn gõ. Đây là nơi Ajax thực sự tỏa sáng!

Bước 1: Tạo route

Trong tệp routes/web.php, thêm:

Route::get('/search', 'UserController@search');

Bước 2: Tạo controller

Chạy lệnh này để tạo một controller mới:

php artisan make:controller UserController

Bây giờ, mở app/Http/Controllers/UserController.php và thêm phương thức này:

public function search(Request $request)
{
$query = $request->get('query');
$users = User::where('name', 'LIKE', "%{$query}%")->get();
return response()->json($users);
}

Bước 3: Tạo view

Tạo một tệp mới resources/views/search.blade.php:

<!DOCTYPE html>
<html>
<head>
<title>User Search</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="search" placeholder="Search users...">
<div id="results"></div>

<script>
$(document).ready(function() {
$('#search').on('keyup', function() {
var query = $(this).val();
$.ajax({
url: '/search',
type: 'GET',
data: {'query': query},
success: function(data) {
var results = '';
$.each(data, function(key, value) {
results += '<p>' + value.name + '</p>';
});
$('#results').html(results);
}
});
});
});
</script>
</body>
</html>

Bước 4: Cập nhật route

Trong routes/web.php, thêm:

Route::get('/', function () {
return view('search');
});

Bây giờ, khi bạn truy cập trang chủ và bắt đầu gõ vào hộp tìm kiếm, bạn sẽ thấy kết quả người dùng xuất hiện động!

Các phương thức Ajax phổ biến trong Laravel

Dưới đây là bảng các phương thức Ajax phổ biến bạn có thể sử dụng trong Laravel:

Phương thức Mô tả Ví dụ
GET Lấy dữ liệu $.get('/users', function(data) { ... });
POST Gửi dữ liệu để tạo $.post('/users', {name: 'John'}, function(data) { ... });
PUT Cập nhật dữ liệu hiện có $.ajax({url: '/users/1', type: 'PUT', data: {name: 'John'}, success: function(data) { ... }});
DELETE Xóa dữ liệu $.ajax({url: '/users/1', type: 'DELETE', success: function(data) { ... }});

Kết luận

Chúc mừng! Bạn đã刚刚 bước vào thế giới của Ajax với Laravel. Nhớ rằng, như bất kỳ kỹ năng mới nào, nó có thể cảm thấy hơi áp lực ban đầu. Nhưng tin tôi đi, với sự thực hành, bạn sẽ tạo ra các ứng dụng web động, phản hồi nhanh trong thời gian ngắn.

Khi chúng ta kết thúc, tôi nhớ lại một học sinh đã từng nói với tôi rằng học Ajax cảm thấy như cho website của anh ấy siêu năng lực. Và bạn biết điều gì không? Anh ấy đã đúng! Vậy hãy đi tiếp, thử nghiệm, và đừng sợ phạm lỗi. Đó là cách chúng ta học hỏi và phát triển.

Chúc các bạn may mắn và hy vọng các yêu cầu Ajax của bạn luôn trả về 200 OK!

Credits: Image by storyset

Hướng Dẫn Trước:
Laravel - Gửi Email
Hướng Dẫn Tiếp Theo:
Laravel - Xử lý lỗi