плагин формы jquery, без обработки ошибок

Question

Кажется, что в плагине Jquery.Form нет средства обработки ошибок, что очень расстраивает. Хотя в документации сказано, что мы можем использовать параметры $ .ajax, я все равно не могу использовать параметр 'error', когда сервер возвращает ошибку, особенно серии 500 и 400. Это то, что этот плагин не может обрабатывать какие-либо ошибки с сервера, или это ошибка и т. Д.? Может кто-нибудь сказать мне, как я могу обрабатывать ошибки (400, 500 и т. Д.) С этим плагином? Мне нужна ваша помощь ... Все, что я хочу, это простая обработка ошибок ... Спасибо.

$("#uploadingImg").hide();

var options = {//Define ajax options
    type: "post",
    target: "#responsePanel",
    beforeSend: function(){
        $("#uploadingImg").show();
    },
    complete: function(xhr, textStatus){
        $("#uploadingImg").hide();
    },
    success: function(response, statusString, xhr, $form){
        // I know what to do here since this option works fine
    },
    error: function(response, status, err){
        // This option doesn't catch any of the error below, 
        // everything is always 'OK' a.k.a 200
        if(response.status == 400){
            console.log("Sorry, this is bad request!");
        }
        if(response.status == 601){
            sessionTimedOut();
        }
    }
}
$("#polygonUploadForm").submit(function(){
    $(this).ajaxSubmit(options); // Using the jquery.form plugin
    return false;
});

Answer 1

Плагин jQuery Form обрабатывает ошибки, а документация верна, если он может использовать опции $ .ajax . Однако есть два режима работы плагина - обычный и загрузка файлов. Проблема в том, что вы выполняете загрузку файла . (Вы не говорите этого, но у вас есть «#uploadingImg» и «#polygonUploadForm», и, рекурсивные рассуждения, у вас есть эта проблема.)

Обычно это утверждается, но вы не можете загрузить файл с помощью AJAX. Этот обходной путь должен использовать iframe. Форма отправки отправляет обычный запрос HTTP и загружает ответ сервера в iframe. Плагин захватывает ответ и вуаля. Поскольку это происходит как обычный HTTP-запрос, правила и поведение $ .ajax не применяются (потому что он не используется). Единственное, что может сделать плагин Form - это относиться к тому, что он получает, как к успеху. В терминах кода загрузка файла никогда не вызовет атрибут «error», назначенный ajaxForm () или ajaxSubmit (). Если вы действительно хотите доказать, что это не AJAX-запрос, присоедините к форме обработчик ajaxComplete () (т. Е. Полностью независимый от методов плагина Form). Это тоже не сработает. Или посмотрите на панель Firebug Net-> XHR.

Вот и все - загрузка не является AJAX-запросом. Лучшее, что вы можете сделать, - это работать с «успешными» или «полными» обратными вызовами ajaxForm () / ajaxSubmit (). Вы ограничены без доступа к фактическому коду ответа HTTP, но вы можете проверить ответ. Если ответ пуст или не соответствует ожидаемому, вы можете вызвать обратный вызов «error», вызвав xhr.abort(). Вместо того чтобы делать «if (хороший ответ) {yay!} Else {oh no!}», Вызов abort () и запуск «error» делает код немного чище и понятнее IMHO. Вот пример кода:

$("#uploadForm").ajaxForm({
    success: function(response, textStatus, xhr, form) {
        console.log("in ajaxForm success");

        if (!response.length || response != 'good') {
            console.log("bad or empty response");
            return xhr.abort();
        }
        console.log("All good. Do stuff");
    },
    error: function(xhr, textStatus, errorThrown) {
        console.log("in ajaxForm error");
    },
    complete: function(xhr, textStatus) {
        console.log("in ajaxForm complete");
    }
});

Плохой ответ напечатает это в журнале консоли:

[jquery.form] state = uninitialized
"NetworkError: 404 NOT FOUND - http://server/fileupload/"
[jquery.form] state = loading
[jquery.form] isXml=false
in ajaxForm success
bad or empty response
[jquery.form] aborting upload... aborted
in ajaxForm error
in ajaxForm complete
in ajaxForm complete

Я не знаю, почему «полный» обратный вызов запускается дважды - кто-нибудь? И наконец, прочитайте эту ветку , если вы спрашиваете, почему плагин jQuery или Form не может просто читать заголовки HTTP iframe.

Answer 2

Jquery Form Plugin обрабатывает статус ответа сервера успешно (код 200), я думаю, что информации достаточно.

Из этого вы можете создать свой статус сервера ответа на стороне

            return $this->returnJson(array(
                'response' => 'success',//error or whatever
                'data' => 'Succesfully saved in the database'
            ));

изКонечно returnJson - это функция для отправки данных Json (вы можете создать их или делать в своем методе)

во внешнем интерфейсе на дескрипторе успеха (срабатывает, когда ответ равен 200), вам просто нужно проверить поле состояния (в данном случае «ответ»), пример ниже:

  var options = {
        dataType : 'json',
        success: handleResponse
    };


    function handleResponse (responseText, statusText, xhr, $form){

          if(responseText.response == 'success') {
                  //do something

                }else if(responseText.response == 'error'){
                    //do something

            }


    }

Answer 3

Только что обнаружил, что сам плагин jquery.form не обрабатывает ошибку сервера, потому что у него нет доступа к заголовкам ответов из-за способа, которым тег file input обрабатывает загрузку файла. Поэтому я думаю, что W3C необходимо просмотреть этот неприятный тег, который не только не позволяет вам стилизовать его с помощью CSS, но и не облегчает обработку ответов сервера.

Хотя должен быть способ обойти это ...

Дайте мне знать, если я сказал что-то не так, и дайте мне знать ваши мысли об этом теге 'file input' ...

Answer 4

Для тех, кто все еще нуждается в этом, это способ заставить его работать

function submitForm()
{
    var isSuccess   = false,
        options = {
            url         : "posturl.php",
            type        : 'POST',
            dataType    : 'json',
            success:function(msg) {
                //set the variable to true
                isSuccess = true;

                //do whatever
            },
            complete: function () {
                if (isSuccess === false) {
                    //throw the error message
                }
            }
        };

    //Ajax submit the form
    $('#your_form').ajaxSubmit(options);

    // always return false to prevent standard browser submit and page navigation
    return false;
 }

Answer 5

В опциях

var options = { 
    target:        '#output2',    
    beforeSubmit:  showRequest,   
    success:       showResponse,  
timeout:    1000
}; 

в случае ошибки вызов триггера отсутствует. Плагин просто зависает, когда вы получаете 500 или 404. Успех зависит только от «успеха», так что это все, что у нас есть.