拉勒维尔·阿贾克斯，页面不断刷新。我想阻止它在发布数据后刷新。

Question

我正在使用laravel和ajax更新表中的记录。目前，记录正在成功地更新，但不知怎么触发了刷新，这使得ajax功能毫无用处。我需要一种方式，只是张贴表单，以更新我的数据库记录，而不刷新页面。

下面是我的代码。

视图文件Ajax

        $(document).on("click", "#primaryButton", function(e) {
         e.preventDefault(); // Prevent Default form Submission
        $.ajax({
            type: "post",
            url: "{{ route('event-qr-post') }}",
            data: $("#message").serialize(),
            success: function(store) {
                location.href = store;
                console.log("success!");
                console.log(location.href);
                console.log($("#message").serialize());
            },

            error: function() {
                console.log("fail");
            }
        }).done(function(store) {
            console.log("itsdone");
        });
        // e.preventDefault();
        return false;
    });

查看文件提交表单

 <form enctype="multipart/form-data" id="message">
            @csrf
            <div class="form-l">
                <div id="ref-lookup">
                    <label style="font-size: 22px; font-weight: 700;margin-block:10px;" for="eventTitle">Reference
                        number</label>
                    <input id="id" name="id" value="{{ '' }}" required>
                    {{-- <input type="hidden" name="name" value="{{ $eid->name }}" required> --}}
                    <input type="hidden" name="staffName" value="{{ $sid->name }}" required>
                    <input type="hidden" name="submitType" id="submitType" value="">
                    <input type="hidden" name="pageType" id="pageType" value="{{ $type }}">
                    {{-- <input type="hidden" name="guestLeft" id="guestLeft" value=""> --}}
                    <div style="display:flex;justify-content:space-between;gap:10px">
                        <button type="button" style="background-color:green"
                            onclick="findGuest(document.getElementById('id').value);">Find Contact</button>
                        <button id="addGuest" type="button" style="background-color:red" onclick="addGuests();">Add a
                            Replacement</button>
                    </div>
                </div>

                <div id="guestForm">

                    <div class="form-group">
                        <label for="" style="width:120px; margin-top:10px; ">First Name</label>
                        <input id="guestFirstName" name="first_name" value="">
                    </div>
                    <div class="form-group">

                        <label for="" style="width:120px; margin-top:10px; ">Last Name</label>
                        <input id="guestSurname" name="last_name" value="">
                    </div>
                    <div class="form-group">

                        <label for="" style="width:120px; margin-top:10px; ">Email</label>
                        <input id="guestEmail" name="email" value="">
                    </div>

                    <div class="form-group">
                        <label for="" style="width:120px; margin-top:10px; ">Company</label>
                        <input id="companyName" name="company" value="">
                    </div>
                    <div class="form-group">
                        <label for="" style="width:120px; margin-top:10px; ">Job Title</label>
                        <input id="guestTitle" name="title" value="">
                    </div>
                    <div class="form-group">
                        <label for="" style="width:120px; margin-top:10px; ">Tel</label>
                        <input id="guestPhone" name="tel" value="">
                    </div>
                    <div class="form-group">
                        <label for="" style="width:120px; margin-top:10px; ">Country</label>
                        <input id="guestCountry" name="country" value="">
                    </div>
                    <div class="form-group">
                        <label for="" style="width:120px; margin-top:10px; ">Notes</label>
                        <input id="guestNotes" name="notes" value="">
                    </div>
                    <button type="button" class="btn-blue" id="primaryButton">
                        Submit
                        <span class="foo fa fa-star checked"></span>
                    </button>

                </div>
            </div>

控制器

    public function post_eventQR_attendance(Request $request)
    {

        // $ins = $request->all();
        // unset($ins['_token']);
        // dd($ins);
        $User = MasterTempAward::where('id', $request->get('id'))->first();
        $User->modified_by = $request->get('staffName');
        $User->attended = "Yes";
        $User->time = Carbon::now();
        $User->business_card = "";
        $User->save();
}

Answer 1

您的页面正在刷新，因为您在location.href = store;请求收到成功响应后传递的ajax。location.href将网页重定向到指定的网址。

因此，将Ajax代码更改为：

$(document).on("click", "#primaryButton", function(e) {
         e.preventDefault(); // Prevent Default form Submission
        $.ajax({
            type: "post",
            url: "{{ route('event-qr-post') }}",
            data: $("#message").serialize(),
            success: function(store) {
                // location.href = store;
                console.log("success!");
                // console.log(location.href);
                console.log($("#message").serialize());
            },

            error: function() {
                console.log("fail");
            }
        }).done(function(store) {
            console.log("itsdone");
        });
        // e.preventDefault();
        return false;
    });