Laravel中AJAX提交表单遇POST方法不支持错误求助

点击保存按钮时出现以下错误：

The POST method is not supported for route private-clinic/patient/patient-Medical-History/MedicalHistory. Supported methods: GET, HEAD.

现有路由配置（web.php） #

// Patient Mediacal History
Route::group(['prefix' => 'patient-Medical-History', 'name' => 'patient-Medical-History.', 'as' => 'patient-Medical-History.'], function () {
    Route::get('/getMedicalHistory/{id}', [PatientMedicalController::class, 'show'])->name('getPatientMedicalHistory');
    Route::post('/SaveHistory/{id}', [PatientMedicalController::class, 'update'])->name('savePatientMedicalHistory');
    Route::get('/MedicalHistory/', [PatientController::class, 'getPatientMedicalHistoryById'])->name('getPatientMedicalHistoryById');
});

数据获取JS代码 #

$(function () {
    'use strict';
    var patientId = '16220'; // 替换为实际患者ID
    var get_url = window.location.origin + '/private-clinic/patient/patient-Medical-History/getMedicalHistory/' + patientId;
    // 从Laravel控制器获取数据
    $.ajax({
        url: get_url,
        method: 'GET',
        success: function (response) {
            var data = response.data;
            var userid = response.patientID;
            $('#family_History').val(data.family_history);
            $('#smoking_History').val(data.smoking_history);
            $('#Immunizations_History').val(data.Immun_history);
            $('#Allergies_History').val(data.Allergy_history);
            $('#patient_id').val(userid.user_id);
            //console.log(JSON.stringify(userid.user_id));
        },
        error: function (error) {
            console.error('Error:', error);
        }
    });

    // 编辑按钮激活文本框
    $('#edit').click(function(event) {
        event.preventDefault(); // 阻止按钮默认行为
        $('#save').css('display', 'block');
        $('#edit').css('display', 'none');
        $('#family_History, #smoking_History, #Immunizations_History, #Allergies_History').prop('disabled', false);
    });
});

表单HTML代码 #

<form>
    @csrf
    <div class="row">
        <div class="col-md-12 mb-2">
            <div class="fw-bolder fs-5 mt-2">家族病史</div>
            <hr>
            <textarea disabled required value="" type="text" name="family_History" id="family_History" class="form-control" placeholder="完整家族病史" rows="4" cols="50"></textarea>
        </div>

        <div class="col-md-12 mb-2">
            <div class="fw-bolder fs-5 mt-2">吸烟史</div>
            <hr>
            <textarea disabled required value="" type="text" name="smoking_History" id="smoking_History" class="form-control" placeholder="完整吸烟史" rows="4" cols="50"></textarea>
        </div>
        <div class="col-md-12 mb-2">
            <div class="fw-bolder fs-5 mt-2">免疫接种史</div>
            <hr>
            <textarea disabled required value="" type="text" name="Immunizations_History" id="Immunizations_History" class="form-control" placeholder="完整免疫接种史" rows="4" cols="50"></textarea>
        </div>
    
        <div class="col-md-12 mb-2">
            <div class="fw-bolder fs-5 mt-2">过敏史</div>
            <hr>
            <textarea disabled required value="" type="text" name="Allergies_History" id="Allergies_History" class="form-control" placeholder="完整过敏史" rows="4" cols="50"></textarea>
        </div>
        
        <div class="col-md-12 mb-2">
            <div class="float-end">
                <button id="edit" name="edit" class="border-0 text-white rounded-pill px-3 bg-primary"> 编辑</button>
                <button style="display: none;" id="save" name="save" class="border-0 text-white rounded-pill px-3 bg-primary"> 保存123</button>
            </div>
        </div>
    </div>
</form>

保存操作JS代码 #

$(function () {
    'use strict';
    var patientId = '16220';
    var save_url = window.location.origin + '/private-clinic/patient/patient-Medical-History/SaveHistory/' + patientId;

    $('#save').click(function(){
        $('#save').css('display', 'none');
        $('#edit').css('display', 'block');
       
        var familyHistory = $('#family_History').val();
        var smokingHistory = $('#smoking_History').val();
        var ImmunizationsHistory = $('#Immunizations_History').val();
        var Allergies = $('#Allergies_History').val();
        var method = patientId ? 'PUT' : 'POST';
        $.ajax({
            url: save_url,
            method: method,
            data: { 
                family_history: familyHistory,
                smoking_history: smokingHistory,
                Immun_history: ImmunizationsHistory,
                Allergy_history: Allergies
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                $('#family_History, #smoking_History, #Immunizations_History, #Allergies_History').prop('disabled', true);
                console.log(response.message);
            },
            error: function (error) {
                console.error('Error:', error);
            }
        });
    });
});

1. 修复路由与请求方法不匹配问题 #

错误核心是：保存按钮触发了表单默认提交行为，将POST请求发送到了当前页面的/MedicalHistory/路由（仅支持GET），而非AJAX目标URL。同时AJAX请求方法与路由配置不统一。

解决步骤： #

（1）阻止表单默认提交

在保存按钮的点击事件中添加阻止默认行为的代码：

$('#save').click(function(event){
    event.preventDefault(); // 新增此行，阻止表单默认提交
    $('#save').css('display', 'none');
    // 后续代码不变
});

（2）统一请求方法与路由配置

路由配置的是POST方法处理保存，需调整AJAX请求方法：

// 替换原method行，统一使用POST
var method = 'POST';

若坚持使用PUT方法，需修改路由并添加Laravel PUT请求支持：

// 修改路由为PUT
Route::put('/SaveHistory/{id}', [PatientMedicalController::class, 'update'])->name('savePatientMedicalHistory');

同时在AJAX数据中加入_method参数：

data: { 
    _method: 'PUT', // 新增此行
    family_history: familyHistory,
    // 其他参数不变
},

2. 优化URL生成（推荐） #

避免手动拼接URL，用Laravel路由函数生成正确地址：
在HTML中添加隐藏元素存储路由URL：

<input type="hidden" id="save-route" value="{{ route('patient-Medical-History.savePatientMedicalHistory', ['id' => 16220]) }}">

JS中直接获取：

var save_url = $('#save-route').val();

3. 检查控制器方法 #

确保PatientMedicalController的update方法正确处理请求：

public function update(Request $request, $id)
{
    // 数据验证
    $validated = $request->validate([
        'family_history' => 'required|string',
        'smoking_history' => 'required|string',
        'Immun_history' => 'required|string',
        'Allergy_history' => 'required|string',
    ]);

    // 更新数据
    $medicalHistory = PatientMedicalHistory::findOrFail($id);
    $medicalHistory->update($validated);

    return response()->json([
        'message' => '病史更新成功',
        'data' => $medicalHistory
    ]);
}

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