通过相同的 JS 代码提交多个表单时不支持 POST 方法。(405)

Question

我在同一页面上有多个表单，它们通过相同的 JavaScript 代码提交。<form class="form" id="cancelchallenge" method="POST" action="{{action('ChallengeController@cancelChallenge')}}"><input type="hidden" name="cancel_challengeid" value="462f2e80-8012-11e9-8b02-65a0a3459d7a"><button type="button" class="btn-submit-cancelchallenge">cancel challenge</button></form><form class="form" id="cancelchallenge" method="POST" action="{{action('ChallengeController@cancelChallenge')}}"><input type="hidden" name="cancel_challengeid" value="9b9ef9d0-8012-11e9-aa0f-95ff09733e52"><button type="button" class="btn-submit-cancelchallenge">cancel challenge</button></form>可能有任意数量的表单，所有这些表单对于每个隐藏输入都有一个唯一的值。这是我的 JavaScript 代码$.ajaxSetup({    headers: {        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')    }});$(".btn-submit-cancelchallenge").click(function(e){e.preventDefault();    var $form = $('#cancelchallenge');    var cancel_challengeid = $("input[name=cancel_challengeid]").val();    $.ajax({        type:'POST',    url: $form.attr('action'),    data:{cancel_challengeid:cancel_challengeid},    success:function(data){        if(data.successful) {            toastr.success(data.successful);        }    }    });});如果我使用上面的代码提交任何给定的表单，它可以工作，但它总是只提交输入值 - 从第一个表单 - 无论我提交哪个表单。好的，所以我意识到我不应该在多个表单中使用相同的 ID，所以我将表单 ID 从：id="cancelchallenge"更改为class="cancelchallenge"，然后从以下位置更新 JS 代码：var $form = $(' #取消挑战'); 到var $form = $(this);认为这将允许使用正确的输入值提交任何给定的表单。但是，这现在会导致 405 错误。“此路由不支持 POST 方法。支持的方法：GET、HEAD。”我的路线是这样的：Route::post('cancelChallenge', 'ChallengeController@cancelChallenge');简而言之，我的控制器如下所示：public function cancelChallenge(Request $request)    {        //Some validation        $challenge = Challenge::where(['id' => $request->cancel_challengeid,         'player1' => Auth::user()->id])->first();        //DB::beginTransaction();        //Update a row in the challenges table        //Insert a row into the transactions table        //Update a row in the users table        //Commit transaction    }任何人都能够指出我正确的方向？谢谢。

Answer 1

$(this) - 当前元素。

el.parent() - 元素的父元素。

el.find() - 在元素内找到选择器。

$('.btn-submit-cancelchallenge').click(function(e){

    e.preventDefault();

    let $form = $(this).parent();

    let cancel_challengeid = $form.find('input[name=cancel_challengeid]').val();

    $.ajax({

        type:'POST',

        url: $form.attr('action'),

        data: {cancel_challengeid: cancel_challengeid},

        success:function(data){

            if(data.successful) {

                toastr.success(data.successful);

            }

        }

    });

});

或更好：

$('.btn-submit-cancelchallenge').click(function(e){

    e.preventDefault();

    let form = $(this).parent();

    $.ajax({

        type:'POST',

        url: form.attr('action'),

        data: form.serialize(),

        success:function(data){

            if(data.successful) {

                toastr.success(data.successful);

            }

        }

    });

});