使用 AJAX 删除 Laravel 记录

删除 Laravel 记录通常需要一个表单来发送 DELETE 请求，但是这样会让页面重新加载，给用户带来不好的体验。解决这个问题的方法是使用 AJAX，可以使删除请求在后台执行，无需页面重新加载。

准备工作

首先，需要在 Laravel 控制器中添加删除方法。以删除 Post 模型为例：

public function destroy(Request $request, Post $post)
{
    $post->delete();

    return response()->json([
        'message' => 'Post deleted successfully!',
    ]);
}

接着，在视图中添加一个删除按钮：

<form action="{{ route('posts.destroy', $post->id) }}" method="POST">
    @csrf
    @method('DELETE')
    <button type="submit" class="btn btn-danger">删除</button>
</form>

现在，使用 AJAX 技术来处理删除请求，而不必让页面重新加载。

使用 jQuery 发送 DELETE 请求

使用 jQuery 可以使编写 AJAX 请求更加轻松：

$(document).ready(function() {
    $('form').on('submit', function(event) {
        event.preventDefault();
        var form = $(this);
        var url = form.attr('action');
        var token = $('meta[name="csrf-token"]').attr('content');
        var method = $('input[name="_method"]').val();

        $.ajax({
            url: url,
            type: 'POST',
            data: {
                _method: 'DELETE',
                _token: token,
            },
            success: function(result) {
                console.log(result.message);
            },
            error: function() {
                console.log('An error occurred');
            },
        })
    });
});

上面的代码解释：

• $('form').on('submit', function(event) { 监听表单提交事件；

• event.preventDefault(); 阻止表单默认提交行为；

• var form = $(this); 获取表单对象；

• var url = form.attr('action'); 获取表单提交的地址；

• var token = $('meta[name="csrf-token"]').attr('content'); 获取 CSRF token；

• var method = $('input[name="_method"]').val(); 获取表单提交的方法；

• $.ajax({ 发送 AJAX 请求：

• url: url, 请求地址为之前获取到的地址；

• type: 'POST', 由于 Laravel 只识别 POST 和 GET 方法，需要将请求类型设置为 POST；

• data: { 向服务器发送数据：

• _method: 'DELETE', Laravel 可以通过 _method 参数识别 DELETE 请求；

• _token: token, 发送 CSRF token；

• success: function(result) { 成功回调函数：

• console.log(result.message); 在控制台输出删除成功信息；

• error: function() { 失败回调函数：

• console.log('An error occurred'); 在控制台输出错误信息；

• }) 结束 AJAX 请求。

使用 Axios 发送 DELETE 请求

使用 Axios 也可以发送 DELETE 请求：

$(document).ready(function() {
    $('form').on('submit', function(event) {
        event.preventDefault();
        var form = $(this);
        var url = form.attr('action');
        var token = $('meta[name="csrf-token"]').attr('content');

        axios({
            method: 'delete',
            url: url,
            data: {
                _token: token,
            },
        })
        .then(function(response) {
            console.log(response.data.message);
        })
        .catch(function(error) {
            console.log('An error occurred');
        });
    });
});

上面的代码解释：

• axios({ 发送 AJAX 请求：

• method: 'delete', 请求类型为 DELETE；

• url: url, 请求地址为之前获取到的地址；

• data: { 向服务器发送数据：

• _token: token, 发送 CSRF token；

• }) 结束 AJAX 请求；

• .then(function(response) { 成功回调函数：

• console.log(response.data.message); 在控制台输出删除成功信息；

• .catch(function(error) { 失败回调函数：

• console.log('An error occurred'); 在控制台输出错误信息。

结论

使用 AJAX 删除 Laravel 记录可以使用户体验更加流畅。本文介绍了通过 jQuery 和 Axios 发送 DELETE 请求的两种方法。