成功ajax時不刷新頁面

Question

我有一個ajax部分，以在laravel中提交數據。 我想如果我提交成功，則不要重新加載頁面並提交錯誤，然后重新加載頁面。 在下面的代碼中，當錯誤正確地重新加載頁面時，在成功的情況下我遇到了問題，不能重新加載頁面，但是必須重新加載結果。 我添加了e.preventDefault（）行，然后在成功的情況下返回true，但在錯誤的情況下返回錯誤

$(document).ready(function() {   
        $('form').submit(function(e){
            //e.preventDefault();
            var form_data = $(this).serialize();
            $.ajax({
                url:'{{ route('contracts.store') }}',
                method: "POST",
                data: form_data,
                dataType: "json",
                success: function(data) {
                    $("#mgsContract").text("Add successfully");
                    $("#hideForm").css("visibility", "visible"); 
                    $("#hideForm").css("height", "auto"); 
                    $("#result-contract-id").val(data.contract_obj);
                },
                error: function(data) {
                    $("#mgsContract").text("Something wrong");
                }
            })
        });
    });

Answer 1

重新添加該e.preventDefault()以防止表單提交，並在錯誤情況下調用location.reload() 。 （或者，如果您想在錯誤情況下按常規提交表單，請使用e.target.submit();代替。由於這是在DOM元素上調用submit [不是jQuery包裝器，因此它不會再次調用您的submit處理程序[這是在DOM元素上以編程方式調用submit與在jQuery對象上以調用方式之間的區別之一。]

Answer 2

當您使用ajax時，laravel會自動以JSON響應驗證錯誤。 因此，要訪問驗證錯誤，可以在ajax的error部分中使用this.responseJSON.errors 。 無需重新加載頁面即可訪問驗證錯誤。

但是在任何情況下，如果您需要重新加載或轉到特定位置，都可以使用window.location

window.location.href = "an address"; // going to specific location

window.location.reload(); //reloading the page

下面是一個ajax示例，其中指定了一個用於顯示表單內所有錯誤的循環。

               $("#form_id").submit(function (e) {

        e.preventDefault(); // avoid to execute the actual submit of the form.

        var form = $(this);
        var url = form.attr('action');

        $.ajax({
            method: "POST",
            url: url,
            data: form.serialize(), // serializes the form's elements.
            success: function (data) {
                    // code in the case of success
            },

            error: function (err) {
                if (err.status == 422) { // when status code is 422, it's a validation issue
                   // code in the case of error
                    console.log(err.responseJSON); 

                    // you can loop through the errors object and show it to the user
                    console.warn(err.responseJSON.errors);

                    // display errors on each form field
                    $.each(err.responseJSON.errors, function (i, error) {

                        var el = $(document).find('[name="' + i + '"]');
                        el.removeClass('is-valid');
                        el.addClass('is-invalid');
                        var parent = el.parents('.form-group');
                        parent.append("<small  class='error-message text-right text-danger d-block pr-5 ' role='alert'>" + error + "</small >");
                    });
                }
            },


        });


    });