Laravel中POST表单无故刷新页面问题排查与解决

我有一个<form>表单，通过POST方法调用AJAX函数，但执行相关操作后页面会无故刷新，不清楚原因，希望找出问题所在！

相关代码 #

web.php #

Route::post('reportEvent', 'ReportController@create')->name('reportEvent');

ReportController.php #

public static function create(Request $request)
{
    $user_id = $request->input('user_id');
    $event_id = $request->input('event_id');
      
    $exists = DB::table('report')->where('users_id', $user_id)->where('event_id', $event_id)->get();
    if (count($exists) > 0) {
        return 2; # 'You have already reported this event!'
    }

    $report = new Report();

    $highest = DB::table('report')->max('id');

    $id = $highest + 1;

    $report->id = $id;
    $report->users_id = $user_id;
    $report->event_id = $event_id;
    $report->description = $request->input('description');
      
    $report->save();

    return 1; # 'Event reported!'
}

HTML #

<form onsubmit="reportEvent({{ $event->id }}, {{ Auth::user()->id }}, description.value)" class="white-font" id="report-form">
    {{ csrf_field() }}

    <label for="description" class="white-font">Description</label>
    <input id="description" type="text" name="description" value="" class="report-textarea" placeholder="Write a report..."   required autofocus>

    <button type="submit" class="report-btn mgl10">
        Confirm
    </button>
</form>

JS/AJAX #

function reportEvent(event_id, user_id, description) {
    $.ajax({
        method: "POST",
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url: "{{ route('reportEvent') }}",
        data: { event_id: event_id, user_id: user_id, description: description },
        success: function (response) {
            showReportStatus(response); //just changes some HTML elements
        }
    });
}

问题排查记录 #

编辑1 #

提交表单后，URL变为类似：http://localhost:8000/event/2?_token=o3YCw1OnddF5YjPjdeYXbrfA0EUuY2Qba8Fkaw7v&description=gdfsf，初始URL为http://localhost:8000/event/2

编辑2（问题仍未解决） #

尝试修改JS代码为：

$('#report-form').on('submit', function(e) {
    e.preventDefault();
    var event_id = $('#event_id').val();
    var user_id = $('#user_id').val();
    var description = $('#description').val();
    $.ajax({
        url: "{{ route('reportEvent') }}",
        type: "POST",
        data: { event_id: event_id, user_id: user_id, description: description },
        success: function (response) {
            showReportStatus(response);
        }
    })
})

最终解决方案 #

移除表单的onsubmit属性，替换为以下JS函数：

let report_form = document.querySelector('#report-form');
report_form.addEventListener("submit", function(event) {
    console.log("submitting");
    event.preventDefault();
    var event_id = $('#event_id').val();
    var user_id = $('#user_id').val();
    var description = $('#description').val();
    var data = {
        event_id: event_id,
        user_id: user_id,
        description: description
    }
    $.ajax({
        url: '/reportEvent',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type: 'POST',
        data: data,
        success: function(response) {
            showReportStatus(response);
        }
    })
})

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