Laravel Ajax CRUD返回按钮失效且触发SQL非空约束错误

问题根源 #

返回按钮使用type="submit"，点击时会触发表单的submit事件，而你绑定的.create_form提交逻辑会默认将空表单数据提交到store路由，触发数据库字段非空约束错误；同时返回按钮的Ajax请求完全多余，直接跳转即可。

解决方案 #

1. 修改返回按钮类型

将返回按钮的type="submit"改为type="button"，避免触发表单提交：

<div class="div2">
    <form method="post" name="form" class="create_form" action="{{ route('students.store') }}" enctype="multipart/form-data">
        @csrf
        Name <input type="text" name="name" id="name"><br><br>
        Email <input type="text" name="email" id="email"><br><br>
        Contact <input type="text" name="contact" id="contact"><br><br>
        Course <input type="text" name="course" id="course"><br><br>

        <button type="submit" class="save_create">Save</button>
        <!-- 修改按钮类型为button -->
        <button type="button" class="back_create">Back</button>
    </form>
</div>

2. 简化返回按钮JS逻辑

无需Ajax请求，直接跳转列表页：

// 表单提交逻辑保持不变
$(document).on('submit', '.create_form', function(event) {
  event.preventDefault();
  var data = $(this).serialize();
  $.ajax({
    url: "{{ route('students.store') }}",
    data: data,
    type: "POST",
    dataType: "json",
    success: function(response) {
      window.location.href = "{{ route('students.index') }}";
    },
    error: function(error) {
      console.log("Errors :", error);
    }
  });
});

// 简化返回按钮跳转逻辑
$(".back_create").on("click", function(event) {
  window.location.href = "{{ route('students.index') }}";
});

3. 后端添加表单验证（可选）

在StudentController的store方法中添加验证，避免前端验证失效后触发数据库错误：

public function store(Request $request)
{
    $request->validate([
        'name' => 'required|string',
        'email' => 'required|email',
        'contact' => 'required|string',
        'course' => 'required|string',
    ]);

    // 执行数据保存
    Student::create($request->only(['name', 'email', 'contact', 'course']));

    return response()->json(['success' => 'Student created successfully']);
}

关于之前formaction导致保存失效的原因 #

当你在表单submit事件中使用$(this).attr('formaction')时，会将表单的默认提交地址改为返回按钮的formaction值，导致保存按钮点击时也会提交到列表页路由（GET请求），进而触发保存逻辑失效。修改返回按钮类型后即可避免该问题。

内容的提问来源于stack exchange，提问作者Pranav Sompura