НЕТ обновить страницу при успехе 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

когда вы используете ajax, laravel автоматически отвечает в JSON за ошибки проверки. поэтому для доступа к ошибкам проверки вы можете использовать this.responseJSON.errors в разделе ошибок вашего ajax. нет необходимости перезагружать страницу для доступа к ошибкам проверки.

однако в любом случае, если вам нужно перезагрузить или перейти в определенное место, вы можете использовать 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 >");
                    });
                }
            },


        });


    });

Answer 2

Добавьте обратно e.preventDefault(), чтобы предотвратить отправку формы, и в случае ошибки вызовите location.reload(). (Или, если вы хотите отправить форму условно в случае ошибки, используйте вместо нее e.target.submit();. Поскольку это вызывает submit для элемента DOM [не обертки jQuery], он не будет вызывать ваш обработчик submit снова. [Это одно из различий между программным вызовом submit для элемента DOM и вызовом его для объекта jQuery.])