Laravel AJAX CRUD带搜索与登录判断功能实现：新手也能懂的详细教程

我们会从最基础的环境配置讲起，先带你用AJAX实现无刷新的CRUD操作（新增、编辑、删除数据都不用刷页面），接着手把手加实时搜索功能——输入关键词立刻筛选数据，不用点“搜索”按钮；最后搞定登录判断：用Laravel中间件+前端验证双重保障，确保只有登录用户才能操作数据。

全程步骤清晰，代码示例直接能用，就算是刚接触Laravel的新手，跟着做也能一步步拼出完整功能。不管你是做后台管理系统，还是小项目的核心功能，这些“高频需求”学会了就能直接落地，解决你最头疼的“功能串联”问题。继续往下读，马上把这些实用技能变成你的“开发武器”～

你有没有过这种情况？做Laravel项目时，想搞个无刷新的AJAX CRUD，结果要么请求返回419，要么新增数据后页面不更新；好不容易搞定CRUD，想加个实时搜索和登录判断——比如没登录的用户不能删数据，又不知道怎么把这些功能串起来？去年帮朋友做他工作室的学员管理后台时，我跟你一样踩了一堆坑，后来摸出了一套“笨办法”，今天把这些经验揉成教程，你跟着做就能搞定。

从0到1搭Laravel AJAX CRUD：我踩过的3个坑

我第一次用Laravel写AJAX CRUD是去年春天，朋友说要做个能无刷新加删改学员信息的后台。本来以为跟着文档复制粘贴就行，结果第一天就栽了三个跟头，现在想想都觉得好笑。

第一个坑是AJAX请求总返回419状态码。一开始我直接写了个$.post(‘/items’, {name: ‘张三’})，结果浏览器控制台跳出来“419 unknown status”。查了半小时文档才反应过来：Laravel默认会给每个页面生成一个CSRF令牌，用来防止别人冒充你发请求改数据（比如有人偷偷用你账号删学员），但AJAX请求不会自动带这个令牌。我当时的解决办法特简单——在页面

里加一行，然后把AJAX请求改成这样：

$.ajax({
 url: '/items',
 type: 'POST',
 headers: {
 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // 加这行！
 },
 data: {name: '张三'},
 success: function(res) {
 console.log(res);
 }
});

加完之后，请求终于能正常发出去了——这一步我记了大半年，后来帮其他朋友改BUG时，十次有八次都是因为没加CSRF令牌。

第二个坑是新增数据后列表不更新。一开始我在控制器的store方法里只返回了return response()->json(['status' => 'success'])，结果前端点“提交”按钮后，虽然提示成功，但学员列表里看不到新数据。后来我才想明白：AJAX是无刷新，但前端得知道“新增了什么”才能更新页面啊！于是把store方法改成这样：

public function store(Request $request)
{
 $validated = $request->validate([
 'name' => 'required|string|max:255',
 'email' => 'required|email|unique:items'
 ]);
 $item = Item::create($validated); // 保存数据
 return response()->json(['status' => 'success', 'data' => $item]); // 把新数据返回给前端
}

前端拿到data后，用jQuery拼成一个

success: function(res) {
 if (res.status === 'success') {
 let newRow = 
${res.data.name}
${res.data.email}
操作按钮
;
 $('#item-table tbody').append(newRow); // 新增行
 $('#add-modal').modal('hide'); // 关闭模态框
 }
}

这一步改完，朋友拍着桌子说“终于对了”——你看，很多时候不是技术难，是没站在前端的角度想“我要什么数据”。

第三个坑是编辑时模态框填不上数据。我一开始给编辑按钮绑了个click事件，发AJAX请求到/items/1/edit，结果控制器返回的是一个视图（Laravel资源控制器默认的edit方法返回视图），而AJAX要的是JSON数据啊！后来我把edit方法改成这样：

public function edit(Item $item)
{
 return response()->json($item); // 返回JSON格式的单条数据
}

前端拿到数据后，用$('#name').val(res.name)把数据填到模态框的输入框里——这才对嘛！原来我混淆了“传统视图渲染”和“AJAX数据请求”的区别，Laravel的资源控制器默认是给传统视图用的，做AJAX得改返回格式。

其实搭AJAX CRUD的核心就四个字：前后端分离——后端只负责“存数据、返数据”，前端负责“显数据、改数据”。你要是刚学，可以先从“新增”功能开始：先写路由、控制器，再写前端AJAX，等新增没问题了，再搞编辑和删除，循序渐进比一口吃成胖子靠谱。

给CRUD加搜索和登录判断：我用了2个“笨办法”但超有效

朋友搞定CRUD后，又提了两个需求：一是“搜索学员姓名不用点按钮，输完就出来”，二是“没登录的人不能删数据”。这两个功能看起来简单，我又踩了两个小坑，但最后用“笨办法”解决了，效果还不错。

实时搜索：用keyup事件加防抖，解决频繁请求的问题

一开始我给搜索框绑了keyup事件，每输入一个字符就发一次AJAX请求——结果输入“张三”三个字，发了三次请求，服务器日志刷得飞快，页面还偶尔会闪。后来我加了个防抖函数：输入停止300毫秒后再发请求，这样既保证“实时”，又不会给服务器压力。

具体怎么做呢？前端代码大概长这样：

let timer = null;
$('#search-input').keyup(function() {
 clearTimeout(timer); // 清空之前的定时器
 let keyword = $(this).val();
 timer = setTimeout(function() {
 $.get('/items/search', {keyword: keyword}, function(res) {
 // 清空原列表，渲染新数据
 $('#item-table tbody').empty();
 res.forEach(function(item) {
 let row = 
${item.name}
${item.email}
操作按钮
;
 $('#item-table tbody').append(row);
 });
 });
 }, 300); // 300毫秒后执行
});

后端控制器里加个search方法：

public function search(Request $request)
{
 $keyword = $request->input('keyword');
 $items = Item::where('name', 'like', '%' . $keyword . '%')->get(); // 模糊搜索姓名
 return response()->json($items);
}

路由里加一行Route::get('/items/search', [ItemController::class, 'search']);——就这么简单！朋友试了之后说：“比之前点按钮舒服多了”。我后来查了Laravel官方文档，里面说where('字段', 'like', '%关键词%')是模糊搜索的标准写法（链接：https://laravel.com/docs/queriesnofollow），没骗你吧？

登录判断：用“中间件+前端验证”，不让用户白点按钮

朋友一开始说“只要后端拦着就行”，但我觉得“用户点了删除按钮，才跳转到登录页”体验太差——得让用户“点之前就知道要登录”。于是我用了两个办法：

第一个办法：后端用中间件拦路由。Laravel自带auth中间件，能直接判断用户有没有登录。我把CRUD的路由改成这样：

Route::resource('items', ItemController::class)->middleware('auth');

这样没登录的用户访问/items会自动跳转到登录页——这是最基础的权限控制。

第二个办法：前端提前判断登录状态。我在页面里用Laravel的@auth指令存了个变量：

 var isLoggedIn = {{ auth()->check() ? 'true' 'false' }}; // 登录状态：true/false

然后给所有操作按钮（新增、编辑、删除）绑了个前置判断：

$('.edit-btn').click(function() {
 if (!isLoggedIn) {
 alert('请先登录！');
 return false; // 阻止后续操作
 }
 // 正常发AJAX请求
});

这样用户点“编辑”按钮时，先弹出提示，比点了之后跳页友好多了。我后来查了Laravel文档，里面说中间件是“过滤HTTP请求的一层”（链接：https://laravel.com/docs/middlewarenofollow），用来做权限控制刚好——后端拦是“安全底线”，前端拦是“用户体验”，两者结合才完美。

Laravel AJAX CRUD常用路由表

最后给你整理了一张我常用的路由表，省得你再查文档：

你按这些步骤做的时候，要是遇到AJAX请求失败，记得先查CSRF令牌有没有加对，或者浏览器控制台有没有报错；要是实时搜索延迟高，试试把防抖时间调长到500毫秒，或者给后端加个Redis缓存（比如把搜索结果存5分钟）；要是登录判断没生效，先查路由有没有加middleware('auth')，或者前端的isLoggedIn变量是不是true。

我当时做的时候，朋友站在旁边看着我改代码，说“你这办法虽然笨，但真的有用”——其实做开发就是这样，有时候“笨办法”反而比“花里胡哨的技巧”更靠谱。你要是试了这些方法，欢迎留言告诉我你的情况，要是遇到bug，我帮你一起琢磨琢磨！

AJAX请求总返回419状态码怎么办？

这是因为Laravel默认需要CSRF令牌防止跨站请求伪造，AJAX请求不会自动携带这个令牌。解决方法很简单，先在页面

里加一行，然后在AJAX请求的headers里加上’X-CSRF-TOKEN’: $(‘meta[name=”csrf-token”]’).attr(‘content’)，这样请求就能正常通过验证了，我第一次踩坑就是因为没加这个。

新增数据后页面列表不更新怎么处理？

很多人会忽略一个点：后端不仅要返回成功状态，还要把新增的数据返回给前端。你得让控制器的store方法返回像return response()->json([‘status’ => ‘success’, ‘data’ => $item])这样的响应，然后前端拿到res.data后，用jQuery把新数据拼成

实时搜索时请求太频繁导致页面卡怎么办？

可以给搜索框的keyup事件加个防抖函数，比如设置300到500毫秒的延迟——每次输入时先清空之前的定时器，等输入停止一段时间再发请求。具体来说，用let timer = null;然后在keyup里写clearTimeout(timer); timer = setTimeout(发请求的逻辑, 300);，这样既能保证实时搜索的体验，又不会频繁请求服务器，我帮朋友做项目时就是这么解决的。

怎么防止没登录的用户操作CRUD功能？

我用了“后端中间件+前端提前验证”的双重方法。后端方面，把CRUD的路由用auth中间件保护起来，比如Route::resource(‘items’, ItemController::class)->middleware(‘auth’)，没登录的用户访问会自动跳登录页；前端方面，用Laravel的@auth指令存个isLoggedIn变量，比如var isLoggedIn = {{ auth()->check() ? ‘true’ ‘false’ }};，然后给操作按钮加前置判断——如果!isLoggedIn就弹出“请先登录”的提示，不让用户白点按钮，这样体验比点了再跳页好很多。

编辑时模态框填不上数据是怎么回事？

这大概率是因为控制器的edit方法返回了视图而不是JSON数据。Laravel资源控制器默认的edit方法是返回编辑视图，但AJAX需要的是单条数据的JSON格式，所以你得把edit方法改成return response()->json($item)，这样前端拿到数据后，就能用$(‘#name’).val(res.name)之类的方法把值填到模态框的输入框里了，我第一次做的时候就混淆了视图和JSON的区别，折腾了半小时才改对。

YUANLEISVIP

收藏 链接