Laravel结合Ajax提交表单返回419错误 preventDefault失效

• DOM结构严重错位：循环内多写了2个多余的</div>闭合标签、1个多余的</form>闭合标签，浏览器自动解析DOM时会打乱表单层级，导致绑定的onsubmit事件无法绑定到正确节点，event.preventDefault()自然不生效。
• 模板变量作用域混乱：外层计数器未初始化就使用$i，内部选项循环又复用$i作为循环变量，循环结束后$i值为4，导致所有表单的id属性重复、传参给JS的序号完全错乱，JS无法选中对应表单。
• JS选择器语法错误：id选择器未加#前缀，就算id正确，$(formId)也无法选中DOM节点，后续逻辑全部失效。
• 419错误直接诱因：原生表单提交未走Ajax逻辑时，请求未携带CSRF令牌；就算事件触发，JS选不到表单也无法序列化带CSRF信息的请求数据，Laravel校验CSRF失败直接返回419状态码。

1. 修正Blade模板结构与变量逻辑 #

删除多余闭合标签，区分外层表单计数器和内层选项循环的变量名，避免变量污染，同时直接在表单内加@csrf指令做双重保险：

@php
    // 外层表单计数器单独命名，不要和内层循环变量重名
    $formIndex = 0;
@endphp
@foreach ($knowledges as $know)
<div class="form-group col-md-6">
    <label>الاجابه</label>
    <form 
        action="{{ route('user.knowledge.store', [$know->id]) }}" 
        method="post"
        onsubmit="handleForm(event, {{ $formIndex }})" 
        id="answerForm{{ $formIndex }}"
    >
        @csrf
        <input type="hidden" value="{{ auth()->user()->id }}" name="user_id">
        <input type="hidden" value="{{ $know->id }}" name="knowledge_id">

        @for ($optIndex = 0; $optIndex <= 3; $optIndex++)
        <div class="row">
            <div class="col-md-10">
                {{ $know->answer[$optIndex]['value'] }}
            </div>
            <div class="col-md-2">
                <input type="checkbox" name="answer[{{ $optIndex }}][key]" value="1">
            </div>
        </div>
        @endfor
        <button class="btn btn-primary" type="submit">سجل الاجابه</button>
    </form>
    <hr>
</div>
@php
    $formIndex++;
@endphp
@endforeach

2. 修正JS逻辑 #

把CSRF全局配置挪到函数外只执行一次，补上id选择器的#前缀，增加错误回调方便调试：

// 全局配置一次CSRF请求头即可
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

function handleForm(event, id) {
    event.preventDefault();
    const $currentForm = $('#answerForm' + id);
    $.ajax({
        type: 'POST',
        url: $currentForm.attr('action'),
        data: $currentForm.serialize(),
        dataType: "json",
        success: function(response) {
            // 自行补充提交成功后的业务逻辑
        },
        error: function(xhr) {
            console.log('请求错误：', xhr.responseText);
        }
    });
    return false;
}

3. 确认全局CSRF meta标签存在 #

检查页面<head>标签内是否存在CSRF meta标签，不存在则补充：

<meta name="csrf-token" content="{{ csrf_token() }}">

• 页面渲染完成后查看源码，每个表单id唯一，不存在标签错位、多余闭合标签的问题
• 点击提交按钮时控制台无JS报错，不会触发页面刷新跳转（说明preventDefault生效）
• 表单内已内置@csrf隐藏域，即使meta标签加载异常，请求也会携带CSRF令牌，不会返回419错误

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