Laravel模态框表单提交后数据无法回填主表单求助

问题核心 #

模态框表单默认同步提交会触发页面全局刷新，导致主表单原有数据清空，必须改用AJAX异步提交避免页面刷新，同时接收后端返回的新数据完成回填。

前端代码修改 #

1. 给模态框表单添加标识并保留CSRF令牌 #

<!-- 新增客户设备模态框表单 -->
<div class="modal fade" id="customerDeviceModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form id="newCustomerDeviceForm" method="POST" action="{{ route('customer-device.store') }}">
      @csrf
      <!-- 客户信息字段 -->
      <div class="mb-3">
        <label class="form-label">Customer Name</label>
        <input type="text" name="customer_name" class="form-control" required>
      </div>
      <!-- 设备信息字段 -->
      <div class="mb-3">
        <label class="form-label">Device Model</label>
        <input type="text" name="device_model" class="form-control" required>
      </div>
      <button type="submit" class="btn btn-primary">Save & Fill Main Form</button>
    </form>
  </div>
</div>

2. 编写AJAX异步提交与回填逻辑 #

$(function() {
  // 监听模态框表单提交事件
  $('#newCustomerDeviceForm').on('submit', function(e) {
    e.preventDefault(); // 阻止默认页面刷新行为
    
    const form = $(this);
    $.ajax({
      url: form.attr('action'),
      type: 'POST',
      data: form.serialize(),
      success: function(res) {
        // 关闭模态框并清空表单
        $('#customerDeviceModal').modal('hide');
        form[0].reset();
        
        // 回填主表单：根据实际主表单字段ID调整
        // 示例：主表单客户名称选择框/输入框、设备型号输入框
        $('#main-form-customer').val(res.customer.id).text(res.customer.name);
        $('#main-form-device').val(res.device.model);
      },
      error: function(xhr) {
        // 处理验证或服务器错误，比如弹出提示
        alert(xhr.responseJSON.message || '保存失败');
      }
    });
  });
});

后端Controller修改 #

修改存储方法，返回JSON格式的新创建数据，而非重定向：

public function store(Request $request)
{
    // 验证请求数据
    $validated = $request->validate([
        'customer_name' => 'required|string|max:255',
        'device_model' => 'required|string|max:255',
        // 其他字段验证规则
    ]);

    // 创建客户
    $customer = \App\Models\Customer::create([
        'name' => $validated['customer_name'],
        // 其他客户字段赋值
    ]);

    // 创建关联设备
    $device = $customer->devices()->create([
        'model' => $validated['device_model'],
        // 其他设备字段赋值
    ]);

    // 返回JSON数据给前端
    return response()->json([
        'customer' => $customer,
        'device' => $device
    ]);
}

关键注意点 #

• 确保主表单的字段ID与JS中的选择器完全匹配
• 若主表单客户字段是下拉选择框，可改为动态追加新选项后选中：$('#main-form-customer').append(new Option(res.customer.name, res.customer.id)).val(res.customer.id);
• 保留Laravel的CSRF令牌，AJAX请求通过serialize()自动携带_token参数

内容的提问来源于stack exchange，提问作者Tommy Saputra