Laravel - Ajax：初學者指南

你好，未來的 Laravel 開發者！我很興奮能帶你進入 Laravel 與 Ajax 的奇妙世界。作為一個教了多年計算機科學的人，我可以告訴你，精通這個主題將在你的網頁開發職業中打開一個全新的領域。那麼，讓我們一起來探索吧！

Laravel - Ajax

Ajax 是什麼？

在我們深入 Laravel 的細節之前，讓我們先來了解什麼是 Ajax。Ajax 的全名是 Asynchronous JavaScript 和 XML。如果這聽起來像是一種清潔用品，別擔心——我記得我第一次聽到這個時候，我以為它是一種清潔用品！

簡單來說，Ajax 讓網頁能夠在不重新加載整個頁面的情況下動態更新內容。這就像魔法一樣——但更好，因為你馬上就會知道它是如何運作的！

在 Laravel 中使用 Ajax 的原因？

我們選擇的 PHP 框架 Laravel 與 Ajax 非常配合。它讓我們能夠創建有平滑、響應迅速的網頁應用程序，這些應用程序感覺更像是桌面應用程序。想像一下，點擊一個按鈕，就能看到即時結果，而不需要那個討厭的頁面刷新。這就是 Laravel 中 Ajax 的力量！

為 Ajax 設置 Laravel

首先，我們來確保我們的 Laravel 項目已經準備好進行一些 Ajax 操作。

創建一個新的 Laravel 項目（如果您還沒有）：

composer create-project --prefer-dist laravel/laravel ajax-tutorial

cd ajax-tutorial

確保您已在 .env 文件中設置並配置了數據庫。

json() 函數：您的新最佳朋友

現在，讓我們來介紹我們節目的明星：json() 函數。這個小寶貝讓 Laravel 中的 Ajax 變得如此平滑和簡單。

json() 函數的語法

這裡是基本的語法：

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

讓我們來分解這個：

$data：這是您想要發送回客戶端數據。它可以是一個數組、一個對象，甚至是 Laravel 的集合。
$status_code：這是可選的。它是您想要與回應一起發送的 HTTP 狀態碼（例如，200 表示成功，404 表示未找到）。

使用 json() 函數

讓我們創建一個簡單的例子來看 json() 函數是如何工作的。我們將創建一個路徑，該路徑返回 JSON 回應。

打開您的 routes/web.php 文件並添加以下路徑：

Route::get('/greeting', function () {
$data = ['message' => 'Hello, Ajax!'];
return response()->json($data);
});

現在，如果您在瀏覽器中訪問 /greeting，您將看到 JSON 回應：

{"message":"Hello, Ajax!"}

興奮吧？但請等一下，還有更多！

真實世界範例：動態用戶搜索

讓我們創建一些更具實際用途的東西——一個用戶搜索功能，當您打字時，結果會動態更新。這是 Ajax 真正閃光的地方！

步驟 1：創建路徑

在您的 routes/web.php 中，添加：

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

步驟 2：創建控制器

運行以下命令來創建一個新控制器：

php artisan make:controller UserController

現在，打開 app/Http/Controllers/UserController.php 並添加以下方法：

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

步驟 3：創建視圖

創建一個新文件 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>

步驟 4：更新路徑

在 routes/web.php 中，添加：

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

現在，當您訪問首頁並開始在搜索框中打字時，您將看到用戶結果動態出現！

Laravel 中常見的 Ajax 方法

這裡是一個 Laravel 中常見 Ajax 方法的表格：

方法	描述	示例
GET	检索数据	`$.get('/users', function(data) { ... });`
POST	发送数据以创建	`$.post('/users', {name: 'John'}, function(data) { ... });`
PUT	更新现有数据	`$.ajax({url: '/users/1', type: 'PUT', data: {name: 'John'}, success: function(data) { ... }});`
DELETE	删除数据	`$.ajax({url: '/users/1', type: 'DELETE', success: function(data) { ... }});`

結論

恭喜你！你剛剛踏入了 Laravel 中 Ajax 的世界。記住，像學習任何新技能一樣，起初可能會有些不知所措。但相信我，只要多加練習，你很快就會創建有動態、響應迅速的網頁應用程序。

當我們結束時，我想到一個學生曾經告訴我，學習 Ajax 讓他的網站有了超能力。而你知道嗎？他說得對！所以勇往直前，試驗，並不要害怕犯錯誤。這是我們所有人學習和成長的方式。

快樂編程，願你的 Ajax 請求永遠返回 200 OK！

Credits: Image by storyset