Laravel 8结合Ajax无刷新插入数据提交后返回JSON无交互问题排查

直接返回JSON响应的核心原因是表单默认的同步提交行为没有被阻止，Ajax代码根本没有执行，浏览器直接按表单默认规则发起同步POST请求，最终直接展示后端返回的JSON内容。

• 修正submit事件的逻辑错误
  你原来的判断if (! e.preventDefault())完全不符合规范：e.preventDefault()的返回值为undefined，取反后逻辑判断异常，且没有正确阻止表单默认提交，同时事件绑定对象错误、拼写也有问题，直接替换为以下代码即可：

$('#modal-form form').validator().on('submit', function (e) {
    //  validator验证不通过时直接终止
    if (e.isDefaultPrevented()) {
        return;
    }
    // 强制阻止表单默认同步提交
    e.preventDefault();
    $.ajax({
        url: $(this).attr('action'),
        type: 'post',
        data: $(this).serialize()
    })
    .done((response)=>{
        $('#modal-form').modal('hide');
        table.ajax.reload();
        // 可选加成功提示：alert(response)
    })
    .fail((errors)=>{
        alert('Tidak dapat menyimpan data');
        return;
    });
});

• 给提交按钮明确指定type属性
  为了避免不同浏览器对按钮默认类型的兼容问题，给保存按钮加上明确的type="submit"属性：

<button type="submit" class="btn btn-sm btn-flat btn-primary"><i class="fa fa-save"></i> Simpan</button>

• 检查依赖引入顺序
  确保页面按顺序引入了jQuery、Bootstrap JS、jQuery Validator、DataTables JS，所有依赖jQuery的代码必须放在jQuery引入语句之后。
• 验证路由配置
  确认调用addForm方法时传入的URL对应Laravel定义的kategori.storePOST路由，没有被其他路由规则拦截。

后端可以返回结构化的JSON数据，方便前端做更灵活的交互判断：

public function store(Request $request)
{
    $kategori = new Kategori();
    $kategori->nama_kategori = $request->nama_kategori;
    $kategori->save();

    return response()->json([
        'code' => 200,
        'message' => 'Data berhasil disimpan'
    ], 200);
}

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