У меня была проблема часами, не обнаружив никаких проблем …
У меня есть регистрационная форма для пользователей для создания учетных записей. Когда кнопка отправки нажата, вызывается функция validateForm.
В этой функции я выполняю некоторые тесты javascript, которые работают, но затем мне нужно проверить, что имя пользователя доступно. Для этого я создал внешний PHP-файл и назову его с помощью $ .ajax.
Вот часть кода:
function validateRegistration(){ // Some tests.... // Check if username is already used // Call external php file to get information about the username $.ajax({ url: 'AjaxFunctions/getUsernameAjax.php', data: "username=" + $("#username").val(), success: function(data){ // Username already in use if(data == "ko"){ // Stop validateForm() } // Username not used yet else{ // Continue tests } } }); // Other tests } Мой вопрос: как я могу сделать validateForm () вернуть false из $ .ajax? Могу ли я, например, объявить переменную js перед частью Ajax и установить ее с помощью Ajax?
Я думаю, что ответ очевиден, но я абсолютно не знаком с Ajax, и я не могу его получить …
Большое спасибо за вашу помощь!
Для этого вы можете либо выполнить синхронный аякс-вызов, как описано в этом ответе , но это то, что невероятно опасно для производительности вашего сайта.
В качестве альтернативы – и это правильный путь – у вас должна быть внешняя переменная независимо от того, доступно ли имя пользователя, как только пользователь вводит что-то, что вы делаете, и если он действителен, вы изменяете переменную, иначе вы показываете предупреждение. Затем в вашей функции validateRegistration () вы проверяете только внешнюю переменную (+ возможная некоторая форма обратного вызова, в зависимости от того, откуда вы ее вызываете). Преимущество состоит в том, что пользователь все еще может продолжать делать что-то (например, заполнять остальную часть формы), пока запрос не выполняется.
Вы можете сделать синхронный вызов ajax вместо асинхронного , как вы делаете сейчас. Это означает, что вызов Ajax завершится до того, как будут выполнены следующие строки кода.
Чтобы сделать это в jQuery, просто добавьте async: false к вашему объекту запроса:
var someVariable; $.ajax({ url: 'AjaxFunctions/getUsernameAjax.php', data: "username=" + $("#username").val(), success: function(data){ // Username already in use someVariable = "something"; if(data == "ko"){ // Stop validateForm() } // Username not used yet else{ // Continue tests } }, async: false }); alert(someVariable); // should alert 'something', as long as the ajax request was successful
В php, если вы распечатываете JSON, например:
echo json_encode(array("ko"=>"good"));
отображается как:
{ "ko":"good" }
то в функции это будет
if(data.ko == "good"){ //do stuff }
Так я обычно это делаю. Вы можете получить переменную, используя имя, которое вы использовали в JSON, чтобы вы могли иметь другие вещи, если вам нужно.
Если целью является проверка доступности имени пользователя, как насчет проверки его или сразу после ввода имени пользователя. Например, вы можете привязать его к событию keyUp для нажатий клавиш или события размытия, когда вы покидаете текстовое поле.
Это будет означать, что к тому моменту, когда пользователь доберется до кнопки отправки, эта часть формы уже будет проверена.
Традиционное решение здесь – передать функцию обратного вызова для validateRegistration которая ожидает логическое значение. После завершения функции Ajax вызовите функцию обратного вызова.
Обработчик onsubmit ожидает возвращаемого значения неизмеримо, поэтому выполнение асинхронного теста в вашем обработчике событий отправки – это довольно простой способ сделать что-то. Вы должны скорее выполнить тест как можно скорее (например, как только пользователь вводит имя пользователя), а затем сохранить результат проверки имени пользователя в глобальной переменной, которая позже будет проверена в момент отправки.
// global variable indicating that all is clear for submission shouldSubmit = false; // run this when the user enters an name, eg onkeyup or onchange on the username field function validateRegistration(callback) { shouldSubmit = false; // number of ajax calls should be minimized // so do all other checks first if(username.length < 3) { callback(false); } else if(username.indexOf("spam") != -1) { callback(false) } else { $.ajax({ .... success: function() { if(data == "ko") { callback(false); } else { callback(true); } } }); } }
Теперь вызовите функцию validateRegistration с аргументом функции:
validateRegistration(function(result) { alert("username valid? " + result); if(result) { $("#username").addClass("valid-checkmark"); } else { $("#username").addClass("invalid-xmark"); } shouldSubmit = result; });
Теперь используйте глобальную переменную shouldSubmit в обработчике событий submit формы, чтобы необязательно заблокировать shouldSubmit формы.