Laravel - Ajax：初学者指南

你好，未来的 Laravel 开发者们！我很兴奋地带你们走进 Laravel 和 Ajax 的奇妙世界。作为一个教计算机科学多年的老师，我可以告诉你，掌握这个主题将在你的网页开发职业生涯中打开一个全新的可能性的领域。那么，让我们开始吧！

Laravel - Ajax

什么是 Ajax？

在我们深入研究 Laravel 的细节之前，先来了解一下什么是 Ajax。Ajax 代表异步 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 真正发光的地方！

第一步：创建路由

在你的 routes/web.php 中添加：

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

第二步：创建控制器

运行这个命令来创建一个新的控制器：

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);
}

第三步：创建视图

创建一个新文件 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>

第四步：更新路由

在 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