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元素[不是jQuery包装器]上调用submit，因此不会调用您的{{ 1}}处理程序[这是在DOM元素上以编程方式调用submit与在jQuery对象上以编程方式调用submit之间的区别之一。]

Answer 2

当您使用ajax时，laravel会自动以JSON响应验证错误。因此，要访问验证错误，可以在ajax的错误部分使用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 >");
                    });
                }
            },


        });


    });

成功ajax时不刷新页面

2 个答案: