Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > Остановка отправки формы ajax


Автор: Niko8D 13.10.2015, 09:34
Добрый день.

Не могу разобраться с ajax. При помощи ajax, я делаю проверку в базу на наличия повторения ФИО, если в базе такое ФИО есть, то ajax возвращает 1, а иначе 0. И так проверка происходит при нажатии кнопки submit (т.е. при отправки формы), в случаи если ajax возвращает 1, отправка формы останавливается, проблема в том ято я не могу остановить отправку формы, по идеи отправка формы должна происходить при команде "return false", но в теле ajax эта команда не срабатывает, а если попытаешься вывести результат работы ajax за тело, то остановка формы все ровно не происходит (я так понял из-за того, что ajax отрабатывается в самом конце работы скрипта). Кто может мне подсказать, как мне остановить отправку формы в зависимости от полученного результата от ajax.

1. Вариант (попытка остановки формы вне тела ajax):

Код

function call() {  
    
    var error = true;    
     
    var msg   = $('#form_ajax').serialize();
    
    $.ajax({        
        type: 'POST',
        url: "validat.php",
        data: msg,
        datatype: "json",
        success:   
                
        function(data){

            var json = JSON.parse(data)

            if(json.duble_user == 1){

                construct_messages(config_valid["duble_user"],'text');

                error = false; 
            }
        }            
    }); 
    
    if(error === false){

        return false;          
    } 
}


2. Вариант ((попытка остановки формы в теле ajax)

Код

function call() {  
        
    var msg   = $('#form_ajax').serialize();
    
    $.ajax({        
        type: 'POST',
        url: "validat.php",
        data: msg,
        datatype: "json",
        success:   
                
        function(data){

            var json = JSON.parse(data)

            if(json.duble_user === 1){

                construct_messages(config_valid["duble_user"],'text');

               return false;
            }
        }            
    });
}


P.S. Я понимаю есть скорей всего другие варианты, но вначале я хочу понять, если есть возможность остановки отправки формы в моем случаи.

Автор: ksnk 13.10.2015, 11:06
Начиная с версии 1.5  $.ajax выдает объект, похожий на XMLHttpRequest. У этого объекта, в том числе, есть метод abort.

Так что что-то вроде 

Код

  var xhr=$.ajax( ... );

  $(document).on('click','.abort_request',function(){
     if(xhr && xhr.abort && xhr.readyState != 4) xhr.abort();
  });  

Автор: Sartorius 13.10.2015, 11:11
ksnk, у него наверно input c type="submit". Можно попробовать в обработчике false возвращать в случае ошибки валидации. AJAX запрос должен быть синхронным.
http://stackoverflow.com/questions/4227043/how-do-i-cancel-form-submission-in-submit-button-onclick-event

Автор: ksnk 13.10.2015, 11:26
Sartorius,  smile Да, наверное. Предыдущий пост не об этом ...

О том:
Как ставится обработчик на форму? Если явно прописывается в форме - то что-то вроде такого должно быть


Код

<form onsubmit="call(this);return false;"...>
 ...


Таким образом - форма будет посылаться всегда только ajax'ом.

Возможно вызов функции можно переписать так
Код

function call(form) {  
        
    var msg   = $(form).serialize();
    
 ...
}


Только смысл validat.php должен быть другой - не проверить, можно ли вставить юзера в таблицу юзеров, а проверить, и если можно - сразу вставить, если нельзя - сообщить почему.

Автор: Niko8D 13.10.2015, 14:41
Цитата

Как ставится обработчик на форму? Если явно прописывается в форме - то что-то вроде такого должно быть


Код

<form id="form_ajax" method="post" name="form_ajax" action="#" onsubmit="return call();">


Добавлено через 9 минут и 32 секунды
Мне для решения задачи, нужно решить одну из двух задач:

1. Почему в теле ajax не отрабатывается функция return false (функция которая останавливает отправку формы).
2. Как сделать так, чтобы ajax не отрабатывался в конце скрипта.

Автор: ksnk 13.10.2015, 15:02
Можно и так:
Код

function call() {  
        
    var msg   = $('#form_ajax').serialize();
    
    $.ajax({        
 ...      
    });
    return false;
}

Автор: Niko8D 14.10.2015, 09:17
Не так не пойдет, отправка формы всегда будет останавливатся. У меня в первом варианте описан подобный метод, но проблема в том, что ajax отрабатывается в конце скрипта, по этому условие

Код

if(error === false){
        return false;          
    } 


не отрабатывается как надо.

Вот первый вариант:

Код

function call() {  
    
    var error = true;    
     
    var msg   = $('#form_ajax').serialize();
    
    $.ajax({        
        type: 'POST',
        url: "validat.php",
        data: msg,
        datatype: "json",
        success:   
                
        function(data){
            var json = JSON.parse(data)
            if(json.duble_user == 1){
                construct_messages(config_valid["duble_user"],'text');
                error = false; 
            }
        }            
    }); 
    
    if(error === false){
        return false;          
    } 
}

Автор: ambi 14.10.2015, 10:11
Товарищ, а вы в курсе, что такое асинхронные запросы? Как только сможете ответить внятно на этот вопрос, все ваши вопросы решатся.

Этот ответ добавлен с нового Винграда - http://ru.vingrad.com/Ostanovka-otpravki-formy-ajax-id561ca654ae20156d618b4568#findElement_E7045_561e003bae20158267b1367f_0

Автор: ambi 14.10.2015, 10:22
В общем, я не совсем понимаю, зачем вы зациклились именно на остановке отправки формы? Один из логичных вариантов проверки, на мой взгляд, который используется повсеместно -- вешать на поле ввода этого ФИО обработчик на ввод с таймаутом, который будет через ajax отсылать запрос на сервер на проверку этого ФИО. Результат будет выводиться под полем соответствующей надписью. Даже если пользователь заполнит все остальные поля раньше, а ФИО заполнит в последнюю очередь и успеет нажать submit формы до истечения таймаута той функции -- в любом случае, нужно будет делать отдельную проверку на бэкенде.

Этот ответ добавлен с нового Винграда - http://ru.vingrad.com/Ostanovka-otpravki-formy-ajax-id561ca654ae20156d618b4568#findElement_E7045_561e02bdae2015eb7ab130f4_0

Автор: Niko8D 14.10.2015, 11:55
Уважаемый ambi, я не вижу смысла усложнять скрипт, по моему мой вариант проще не куда, единственное его надо немного доработать.

Автор: ksnk 14.10.2015, 14:22
Цитата(Niko8D @  14.10.2015,  09:17 Найти цитируемый пост)
if(error === false){
        return false;          
    } 
...
не отрабатывается как надо.

Ну, дык! Этот error сменит свое значение только после отработки ajax'а. Совсем в другое время. Так что возвращаемое из функции значение всегда будет не false.

Вариантов решения несколько. Можно сделать асинхронный запрос и сразу получить ответ, прямо в этой же функции. 
Можно отправить форму уже после получения ответа от сервера.

Код

...
   $.ajax({        
        type: 'POST',
        url: "validat.php",
        data: msg,
        datatype: "json",
        success:   
                
        function(data){
            var json = JSON.parse(data)
            if(json.duble_user == 1){
                construct_messages(config_valid["duble_user"],'text');
                error = false; 
            } else {
                $('#form_ajax').submit();
            }
        }            
    }); 
    return false; 
}

Автор: Niko8D 15.10.2015, 11:36
Форма останавливается, но только в случаи успеха форма не отправляется(

Автор: Niko8D 15.10.2015, 12:45
Форма на самом деле отправляется но только через 10с, почему?

Автор: ksnk 15.10.2015, 13:26
Отлаживать нужно. Поставить console.log во все значимые строки  - начало функции call , получение данных от сервера, вызов submit'а формы.
 

Автор: Niko8D 15.10.2015, 15:26
Причем она уходит только в том случаи, когда в ajax добавляешь параметр 

Код

async: false

Автор: Niko8D 16.10.2015, 15:08
Что-то странное происходит, поставил console.log перед 

Код

$.ajax({        
        type: 'POST',
        url: "validat.php",
        data: msg,
        async: false,
        datatype: "json",
        success:   
                
        function(data){
            var json = JSON.parse(data)
            if(json.duble_user == 1){
                construct_messages(config_valid["duble_user"],'text');
                error = false; 
            } else {
                
                console.log(data)

                $('#form_ajax').submit();
            }
        }            
    }); 
    return false; 
}


В консоле происходит какой-то цикл, который выводит 975 раз

Код

 {"duble_user":null}


 (там еще ошибка появляется в конце, но я не успеваю ее разглядеть, так как форма отправляется, соответственно страница обновляется) естественно это занимает какое-то время и далее форма отправляется. Если убераеш парамент

Код

async: false


то цинкл идет до бесконечности.

Добавлено через 13 минут и 26 секунд
Console.log выводит интересные результвты. Console.log я поставил перед стракой отправки формы

Код

 $('#form_ajax').submit();


Консоль выводит  цикл и  при каждом выводе выводит строку 

Код

{"duble_user":null}


Цикл бесконечный, но как только в ajax устанавливаешь параметр 

Код

async: false


цикл обрывается на 975 выводе. Вот такая ерунда, почему так происходит я не понимаю.

Автор: Niko8D 16.10.2015, 15:44
Console.log выводит интересные результвты. Console.log я поставил перед стракой отправки формы

Код

 $('#form_ajax').submit();


Консоль выводит  цикл и  при каждом выводе выводит строку 

Код

{"duble_user":null}


Цикл бесконечный, но как только в ajax устанавливаешь параметр 

Код

async: false


цикл обрывается на 975 выводе. Вот такая ерунда, почему так происходит я не понимаю.

Автор: ksnk 16.10.2015, 17:35
Мне казалось, что явный вызов submit() не вызывает обработчик onsubmit. Возможно теперь это уже не так.
Можно так изменить обработчик - добавить переменную `call.gone`. По значению переменной - вызывать $.ajax  еще раз или не вызывать.
Код

if(!call.gone){
   call.gone=true;
$.ajax({        
        type: 'POST',
        url: "validat.php",
        data: msg,
        async: false,
        datatype: "json",
        success:   
                
        function(data){
           setTimeout(function(){call.gone=false;},10); // таймаут, чтобы submit не зациклился
           var json = JSON.parse(data)
            if(json.duble_user == 1){
                construct_messages(config_valid["duble_user"],'text');
                error = false; 
            } else {
                
                console.log(data)
                $('#form_ajax').submit();
            }
        }            
    }); 
}
    return false; 
}

Автор: Niko8D 19.10.2015, 11:10
Что самое интересное, если этот скрипт вынести отдельно, например в отдельный файл (в чистый файл не связанный с проектом), то он работает нормально (т.е. без зацикливания). Сейчас буду разбератся, в чем причина зацикливания.

Автор: Niko8D 19.10.2015, 14:00
Теперь мне все понятно. Как выше было сказано. Проблемы в версии jqury. В версии jQuery 1.2.6 работает нормально, а в версии jQuery v1.8.2 отправка формы зацикливеатся. 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)