通过相同的 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){&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; let $form = $(this).parent();&nbsp; &nbsp; let cancel_challengeid = $form.find('input[name=cancel_challengeid]').val();&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type:'POST',&nbsp; &nbsp; &nbsp; &nbsp; url: $form.attr('action'),&nbsp; &nbsp; &nbsp; &nbsp; data: {cancel_challengeid: cancel_challengeid},&nbsp; &nbsp; &nbsp; &nbsp; success:function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(data.successful) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; toastr.success(data.successful);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});或更好：$('.btn-submit-cancelchallenge').click(function(e){&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; let form = $(this).parent();&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type:'POST',&nbsp; &nbsp; &nbsp; &nbsp; url: form.attr('action'),&nbsp; &nbsp; &nbsp; &nbsp; data: form.serialize(),&nbsp; &nbsp; &nbsp; &nbsp; success:function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(data.successful) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; toastr.success(data.successful);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});