Question

我有一个表格，其中显示了即将举行的比赛，每行的最后一个td元素中都带有一个“ enter tour”（进入比赛）按钮，如下所示。

<tbody>
    @foreach($tournaments as $tournament)
        <tr>
            <td>{{ $tournament->name }}</td>
            <td>{{ $tournament->start_time }}</td>
            <td align="right">1</td>
            <td align="right">1</td>
            <td>${{ $tournament->prize }}</td>
            <td>${{ $tournament->entry }}</td>
            <td>
                <form class="entertournament" method="POST" action="{{action('EnterTournamentController@enterTournament')}}">
                      <input type="hidden" name="tournamentid" value="{{ $tournament->id }}">
                      <button class="btn btn-label-success btn-sm btn-upper btn-submit-entertournament">accept</button>&nbsp;
                 </form>
            </td>
            <td>test</td>
        </tr>
    @endforeach
</tbody>

下面是用于提交表单的javascript

<script type="text/javascript">

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $(".btn-submit-entertournament").click(function(e){
                e.preventDefault();

                let form = $(this).closest('form');
                console.log(form);
                $.ajax({
                    type:'POST',
                    url: form.attr('action'),
                    data: form.serialize(),

                    success:function(data){
                        if(data.successful) {
                            toastr.success(data.successful);
                        }
                    }
                });

            });

</script>

如果我将表格放在表格之外，则表格会很好地提交并显示从控制器按预期返回的烤面包机通知。

但是，当将表单放在td元素中时，提交表单和419 |时我被重定向到/ enterTournament。显示页面过期错误。

然后我在表单下添加@csrf（尽管我认为这很奇怪，因为我知道我在脑海中指定了csrf，因此为什么表单在表格外时可以很好地提交）。

现在，当我尝试再次提交表单时，我被重定向到/ enterTournament，但是这次使用JSON响应：{“ successful”：“ Tournament输入”}。提交表单时，应通过烤面包机通知显示此响应，而无需页面重定向。

有什么想法将表单放置在td标签中为什么会发生这种情况？

更新：如果我从表元素中删除该类：class =“ kt-datatable”，则该类现在可以正常工作。但是我需要将此类应用于表。似乎有点奇怪，关于此类如何引起表单提交问题的任何想法？

Laravel使用Ajax提交表单在TD标签中不起作用

0 个答案: