Leaflet地图弹窗表单使用POST路由跳转页面报错排查

你的代码存在几个关键错误，导致出现“POST方法不被支持”的提示：

1. 表单onsubmit属性误用
   你直接把路由URL写在onsubmit属性里，这不符合HTML规范。onsubmit需要绑定JavaScript逻辑，而非跳转地址。表单的提交目标应该通过action属性指定。

2. 路由参数替换不匹配
   你定义的路由占位符是:training_id，但替换时用的是:id，这会导致URL替换失败，生成的路由地址不正确。

3. 表单action属性缺失
   未给表单设置action属性时，浏览器会默认提交到当前页面，而当前页面的路由大概率不支持POST方法，因此触发错误。

修正后的代码示例：

map_data.forEach(element => {
    console.log('program=' + element.program + ', lat=' + element.gps_lat + ', long=' + element.gps_lon);

    data[i] = L.marker([element.gps_lon, element.gps_lat], {icon: redIcon}).addTo(map);

    // 修正路由参数替换：匹配占位符:training_id
    var url = '{{ route("opentraining", ":training_id") }}';
    url = url.replace(':training_id', element.id);
    
    data[i].bindPopup(
        '<strong>' + element.program + '</strong>'
        + '<br />'
        + '<b>Location:</b> ' + element.location + ', ' + element.district + ', ' + element.province
        + '<br />'
        + '<b>Description:</b> ' + element.description
        + '<br /><br />'
        // 移除错误的onsubmit，添加正确的action属性
        + '<form action="' + url + '" method="POST" class="formEditTraining">@csrf<input type="hidden" name="training_id" value='+ element.id  + '>'
        + '<button type="submit" value="submit" class="btn btn-primary trigger-submit">View Record</button>'
        +'</form>'
    ).openPopup();
    i++;
});

额外确认事项：

• 确保Laravel路由中opentraining确实配置了POST方法，例如：

  Route::post('/training/{training_id}', [TrainingController::class, 'open'])->name('opentraining');
  

• 如果只是查看记录，使用GET方法会更符合HTTP规范，若坚持用POST，需保证路由和控制器方法均匹配POST请求。

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