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

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

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

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

热门问答

php发送smtp邮件失败,请帮忙看是腾讯云不支持端口25么?

SQL GM热爱数据库的小工匠
推荐
腾讯云默认限制 TCP:25 端口,支持解封,但是有注意事项: 仅支持解封预付费包年包月的云服务器,暂不支持按量付费的云服务器。 每个腾讯云账号仅可解封5个实例。 请确保 TCP 25端口仅用于连接第三方 SMTP 服务器,并从第三方 SMTP 服务器外发邮件。如发现您直接通过云...... 展开详请

怎么关闭域名隐私保护?

推荐
根据 ICANN 《通用顶级域名注册数据临时政策细则(Temporary Specification for gTLD Registration Data)》和欧盟《通用数据保护条例》合规要求,腾讯云域名信息(WHOIS)查询结果中将不再展示域名所有者、所有者联系邮箱等信息。鉴于...... 展开详请

设置了云函数环境变量TZ 为 asia/shanghai,云函数端仍是0时区日期,为何不生效?

Mason-Serverless

腾讯 · 产品经理 (已认证)

推荐
设置 TZ=Asia/Shanghai 可以获取到北京时间 image.png image.png image.png ... 展开详请

安卓APP使用免费版加固后,在Android11系统上运行闪退,是什么原因?

hello,目前已经适配了Android R Beta1,预计这周内上线移动应用安全在线版,请留意日志更新

serverless db 如何管理?

Richel码农
推荐
1.支持pg_dump,psql工具进行数据导入和导出。 2.本地CLI,可以使用postgresql的客户端psql,也可以使用dbeavr,navicate,pgadmin等工具访问。 3.支持操作DB ,要自己写逻辑 ... 展开详请

扩展能力之云调用,小程序端出错:[tcb-js-sdk]参数错误:非法的应用标识?

software微软、谷歌、腾讯、阿里、百度……
推荐
您好,appSign必须是小程序的appid,appSecret的两个字段必须是在云开发控制台-安全来源里配置过的。 image.png ... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券