Laravel AJAX 中的路由编辑按钮 - Javascript

在 Laravel AJAX 中，路由编辑按钮是一种非常有用的工具，它使得在前端页面中使用 AJAX 技术编辑和更新数据变得极为便捷。本文将介绍如何使用 Javascript 实现路由编辑按钮功能。

准备工作

在开始编写代码之前，我们需要确保以下条件已经满足：

• Laravel 环境已经配置好
• jQuery 已经加载
• Blade 模板语法已经掌握

代码实现

以下是使用 Javascript 实现路由编辑按钮的示例代码：

// 定义一个编辑按钮的点击事件
$('#editButton').on('click', function() {
    // 获取当前数据的 ID
    var dataId = $(this).data('id');

    // 发送 GET 请求, 获取该数据的详细信息
    $.ajax({
        url: '/get-data/' + dataId,
        method: 'GET',
        success: function(response) {
            // 将数据填充到表单中
            $('#nameInput').val(response.name);
            $('#emailInput').val(response.email);
            $('#phoneInput').val(response.phone);

            // 显示编辑表单
            $('#editForm').show();
        }
    });
});

// 定义表单提交事件
$('#editForm').on('submit', function(event) {
    event.preventDefault();

    // 获取表单中的数据
    var name = $('#nameInput').val();
    var email = $('#emailInput').val();
    var phone = $('#phoneInput').val();

    // 获取当前数据的 ID
    var dataId = $('#editButton').data('id');

    // 发送 POST 请求, 更新数据
    $.ajax({
        url: '/update-data/' + dataId,
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            name: name,
            email: email,
            phone: phone
        },
        success: function(response) {
            // 隐藏编辑表单
            $('#editForm').hide();

            // 更新页面中的数据
            $('#name-' + dataId).text(response.name);
            $('#email-' + dataId).text(response.email);
            $('#phone-' + dataId).text(response.phone);
        }
    });
});

代码解释

代码中的 #editButton 是一个按钮的 ID，用于触发数据编辑操作。按钮标签应当包含一个数据 ID，用于指定需要编辑的数据。具体代码如下：

<button id="editButton" data-id="{{ $data->id }}">编辑</button>

代码中的 #editForm 是一个表单的 ID，用于提交更新数据的请求。表单中包含了需要更新的数据的详细信息。具体代码如下：

<form id="editForm" style="display: none;">
    <input type="text" id="nameInput">
    <input type="email" id="emailInput">
    <input type="tel" id="phoneInput">
    {{ csrf_field() }}
    <input type="submit" value="更新">
</form>

代码中的 /get-data/{id} 和 /update-data/{id} 是 Laravel 中的路由，用于获取数据和更新数据。具体代码如下：

Route::get('/get-data/{id}', function($id) {
    $data = Data::find($id);
    return response()->json($data);
});

Route::post('/update-data/{id}', function($id) {
    $data = Data::find($id);
    $data->update(request()->all());
    return response()->json($data);
});

总结

使用 Javascript 实现路由编辑按钮功能是 Laravel AJAX 开发中的常见需求之一。本文介绍了如何实现这一功能，并详细解释了代码实现的细节。希望本文能够对初学 Laravel AJAX 的程序员有所帮助。