Laravel结合Ajax实现按URL ID查数据并返回JSON更新前端

1. 调整控制器返回JSON数据 #

原控制器返回视图，需改为返回JSON格式的记录数据。findOrFail方法本身会自动抛出404异常，无需额外判断：

public function view($id)
{
    $formData = FormData::findOrFail($id);

    return response()->json([
        'status' => true,
        'data' => $formData
    ]);
}

2. 修改路由请求方法 #

获取数据的接口符合RESTful规范应该用GET方法，而非POST：

Route::get('/quote/{id}', [FormController::class, 'view'])->name('quote.view');

3. 修正Ajax请求并添加前端更新逻辑 #

原Ajax存在路由生成错误、请求方法不匹配的问题，同时需要添加代码将返回的数据填充到前端表单：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

// 从URL中提取目标ID（例如URL为/quote/123时，取123）
const quoteId = window.location.pathname.split('/').pop();

$.ajax({
    url: '{{ route("quote.view", ":id") }}'.replace(':id', quoteId),
    method: 'GET',
    success: function(response) {
        console.log("response", response);
        if (response.status) {
            // 根据表单字段的name属性填充对应值，按需调整字段名
            $('input[name="width"]').val(response.data.width);
            $('input[name="height"]').val(response.data.height);
            $('input[name="length"]').val(response.data.length);
            $('input[name="color"]').val(response.data.color);
            // 其他配置字段同理补充
        }
    },
    error: function(xhr) {
        alert(xhr.status === 404 ? '找不到对应的配置记录' : '获取数据失败，请重试');
    }
});

补充提示 #

• 可将Ajax代码放入$(document).ready()函数内，确保页面DOM加载完成后自动执行数据获取逻辑。
• 若FormData模型存在敏感字段需隐藏，可在模型中定义$visible属性指定允许返回的字段：

  protected $visible = ['width', 'height', 'length', 'color'];
  

内容的提问来源于stack exchange，提问作者Faraz Mohammed