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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (85)

我在同一页面上有多个表单,这些表单是通过相同的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 = $(' #cancelchallenge'); 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
    }

有人能指出我正确的方向吗?谢谢。

提问于
用户回答回答于

$(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);
            }
        }
    });
});

扫码关注云+社区

领取腾讯云代金券