AJAX Post 在 Laravel 框架中两次

Question

我在 stackoverflow 中搜索了相同的标题，但我没有运气.. 这是我的 ajax 脚本

$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('input[name="_token"]').val()
        }
    });

    $('#btn-submit').on('click', function(e)
    {
        e.preventDefault();
        var nama_kelompok_jalan = $('input[name="nama"]').val();
        var action = $('#csrf-token').attr('action');
        $.ajax({
            type:'POST',
            url:action,
            data:{nama:nama_kelompok_jalan},
            success:function(data){
                alert(data.success);
                location.reload();
            },
            error: function () {
                alert('Tidak ada pelanggan yang dipilih');
            }
         });
    });

这里是我的控制器

public function store(Request $request)
    {
        $name    = $request->nama;
        $nometer = $request->nometer;

        $kelompok       = new Kelompok;
        $kelompok->nama = $name;
        $kelompok->save();
        return response()->json(['success'=>'Data Kelompok telah tersimpah..']);
    }

这是我的刀

              <input type="hidden" action="{{route('kelompok.store')}}" name="_token" id="csrf-token" value="{{ Session::token() }}" />
                <div class="kt-portlet__body">

                    {{-- <div class="form-group form-group-last">
                        <div class="alert alert-secondary" role="alert">
                            <div class="alert-icon"><i class="flaticon-warning kt-font-brand"></i></div>
                            <div class="alert-text">
                                The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
                            </div>
                        </div>
                    </div> --}}
                    <div class="form-group">
                        <label>Nama Kelompok</label>
                        {{Form::text('nama', '', ['min'=>'1','max'=>'30','class'=>'form-control','placeholder'=>'E.g: Juanda','required'])}}
                    </div>
                </div>
                <div class="kt-portlet__foot">
                    <div class="kt-form__actions">
                        <button id="btn-submit" type="btn" class="btn btn-primary">Submit</button>
                        <button type="reset" class="btn btn-secondary">Cancel</button>
                    </div>
                </div>

        </div>

这是我不使用 laravel 形式来避免来自 laravel 和 ajax 的双重发布，但我仍然得到双重发布，我尝试在网络部分检查元素我的脚本只加载一个而不是两次，我尝试来自控制器的 console.log 响应数据只有一个，但在mysql中我得到了两个具有相同值的新插入数据.. 对我有什么建议吗？？谢谢...

还有一个问题.. 在我的笔记本电脑上的开发环境中工作正常，这是在带有生产环境的服务器上，两者都具有 php.ini 上具有相同配置的 php 7.3

Answer 1

type="btn" 部分无效。您应该尝试使用type="button"。很可能是因为无效的按钮类型，导致按钮被解释为提交按钮。

代码应该是

<button id="btn-submit" type="button" class="btn btn-primary">Submit</button>

您可能将它与 Bootstrap 类混淆了。

Answer 2

您需要进行一些更改

<button id="btn-submit" type="btn" class="btn btn-primary" onClick="submitForm()">Submit</button>

然后在你的 javascript 中

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('input[name="_token"]').val()
    }
});

function submitForm() {

    var nama_kelompok_jalan = $('input[name="nama"]').val();
    var action = $('#csrf-token').attr('action');
    $.ajax({
        type: 'POST',
        url: action,
        data: {
            nama: nama_kelompok_jalan
        },
        success: function (data) {
            alert(data.success);
            location.reload();
        },
        error: function () {
            alert('Tidak ada pelanggan yang dipilih');
        }
    });


}

Answer 3

我解决了我的问题，删除了这个location.reload();

我不知道为什么...哈哈哈，谢谢大家..