Как прочитать ответ сервера после отправки формы?

Question

[Алексей Денисов]

На странице имеется кнопка, при нажатии которой появляется модальное окно с формой для отправки данных на сервер (метод submit), после отправки модальное окно закрывается и в таблице появляется запись, но если что-то пошло не так,
Как отловить ответ сервера, после отправки формы ?
Сутки читаю jQuery, не могу найти ответ.
В основном используют Ajax , но в форме много полей и загрузка файла на сервер.

Comments

[Everything_is_bad]

Сутки читаю jQuery, не могу найти ответ.

jQuery это легаси, обычный js нормально с этим работает. Ну и вообще эта элементаршина, примеров в гугле куча, так прибегай сюда уже с конкретным кодом и ошибкой

Answer 1

[Adamos]

Файлы через ajax спокойно отправляются, и даже прогресс-бар можно прикрутить.
Пример (jQuery, WinterCMS, Bootstrap):

postFiles: function($form, request, callback)
    {
        var formData = new FormData($form[0]);
        var input = $form.find('input[type=file]')[0];
        for(var n in input.files) {
            if(input.files[n].size > 104857600) {
                alert('Максимальный размер загружаемых файлов - 100 Мб!');
                return;
            }
        }
        $.ajax({
            url: window.location.href,
            headers: {
                'X-WINTER-REQUEST-HANDLER': request? request : $form.attr('data-request') // это для WinterCMS
            },
            method: 'POST',
            dataType: 'json',
            type: 'POST',
            processData: false,
            contentType: false,
            data: formData,
            success: function(data) {
                $('#file-upload-progress').remove();
                if(callback) {
                    callback(data);
                } else {
                    eval($form.attr('data-request-success'));
                }
            },
            error: function(data) {
                $('#file-upload-progress').remove();
                if(data.responseText) {
                    alert(data.responseText);
                }
            },
            xhr: function() {  // custom xhr
                var myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload) {
                    myXhr.upload.addEventListener(
                        'progress',
                        function(evt) {
                            if (evt.lengthComputable) {
                                var $progress = $('#file-upload-progress');
                                if($progress.length === 0) {
                                    $progress = $(
                                        '<div id="file-upload-progress" style="position: fixed; top: 0; left: 45%; text-align: center; background-color: white; border-radius: 1em; padding: 0 1em 1em 1em; border: 2px solid #CEF; z-index: 2000">' +
                                        '<h6>Загрузка файлов</h6>' +
                                        '<div class="progress" style="margin-bottom: 1em">' +
                                        '<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>' +
                                        '</div>' +
                                        '</div>'
                                    );
                                    $progress.append(
                                        $('<button class="btn btn-sm btn-default"><i class="icon-remove"></i>&nbsp;Отменить загрузку</button>')
                                            .click(function() {
                                                myXhr.abort();
                                                $progress.remove();
                                            })
                                    )
                                    $('body').append($progress.hide());
                                }
                                var percentComplete = Math.round(evt.loaded / evt.total * 100);
                                if(percentComplete === 1) {
                                    $progress.hide();
                                } else {
                                    $progress.find('div.progress-bar').css('width', percentComplete + '%').attr('aria-valuenow', percentComplete).html(percentComplete + ' %');
                                    $progress.show();
                                }
                            }
                        },
                        false
                    );
                }
                return myXhr;
            }
        });
        return false;
    },