2012-05-31 6 views
2

У меня есть PHP-скрипт, который проверяет адрес электронной почты, чтобы определить, действительно ли это или нет. Функция просто возвращает true или false. Я пытаюсь реализовать вызов ajax в php-файл и вернуть true или false обратно в функцию javascript. В настоящее время я ничего не получаю.Получение возвращаемого значения от AJAX

function validateForm() { 
    var email = document.forms["contact"]["email"].value; 
    var validEmail; 

    $.ajax({ 
     type: "POST", 
     url: "validateEmail.php", 
     data: "email=" + email, 
     success: function(result) { 
      validEmail = result; 
      console.log('result: ' + validEmail); 
     } 
    }); 
} 

Если я могу извлечь true или false я тогда сделать некоторые булево проверку, чтобы определить, как действовать. Функция validateForm() вызывается, когда пользователь нажимает кнопку «Отправить».

<form name="contact" action="submitOrder.php" onsubmit="return validateForm();" method="post"> 

Я хотел бы функцию validateForm() вернуться ложным, если адрес электронной почты не является действительным, так что submitOrder.php никогда не вызывается, но из-за асинхронной природы AJAX, я не знаю, как это сделать.

UPDATE

Запрос работает правильно (я уверен). Это то, что я вижу в Firebug. enter image description here Я все еще ничего не вижу. Консоль печатает «результат:». Я также изменил validateEmail.php, чтобы вернуть номер 17, и я все равно ничего не получил.

Спасибо за помощь!

+0

проверить вашу консоль и сетевой трафик, чтобы увидеть, если запрос посылается – Galen

+0

как проверить, если адрес электронной почты является действительным? –

+0

Похоже, что публикация выполняется правильно. См. Снимок экрана. –

ответ

1

Используйте JQuery Validate плагин. Было бы намного проще, чем хэшировать это с нуля.

+0

Я добавил, что мне это нравится. Благодарю. Я не думаю, что у него есть чек на номер телефона. Это что-то я могу добавить? –

+0

Да. Вы можете добавить его так: http://docs.jquery.com/Plugins/Validation/CustomMethods/phoneUS –

0

Функция ajax jQuery по умолчанию является асинхронной. Это означает, что он делает запрос ajax и затем возвращается. Вероятно, вам необходимо установить для параметра async значение false, а затем установить validEmail в вашей функции успеха, как вы делаете. Затем вы можете безопасно вернуть validEmail после вызова ajax.

function validateForm() { 
    var email = document.forms["contact"]["email"].value; 
    var validEmail = false; 

    $.ajax({ 
    type: "POST", 
    url: "validateEmail.php", 
    async: false, 
    data: "email=" + email, 
    success: function(result) { 
     validEmail = result; 
     console.log('result: ' + validEmail); 
    } 
    }); 

    return validEmail; 
} 
0

Я думаю, что у вас отсутствует; в конце вашего Jquery вызова

$.ajax({ 
    type: "POST", 
    url: "validateEmail.php", 
    data: "email=" + email, 
    success: function(result) { 
     validEmail = result; 
     console.log('result: ' + validEmail); 
    } 
}); 

Я рекомендую установить поджигатель, так что вы можете увидеть, что происходит с AJAX вызовов & ответов - вы должны быть в состоянии отладки это намного проще тогда.

+0

У меня есть Firebug (см. Снимок экрана), и я думаю, что это публикация, но я просто не получаю ответа. –

0

Вы можете сделать вызов Ajax submit, если результат действителен, если вы не хотите, чтобы вызов AJAX был синхронным. Вызовите ваш validateForm и верните false в onsubmit. (Я бы не сделал validateForm сам возвращает false, поскольку это не будет ортогонально).

0

Думаю, вам понадобится event.preventDefault(); чтобы получить вызов асинхронной правильно работать

$ ('# Submit-кнопку-идентификатор') нажмите (функция (событие) { event.preventDefault(); }).

Это должно помешать браузеру отправить форму перед выполнением какой-либо проверки. (Обратите внимание, что вы хотите, чтобы ваша кнопка отправки указала класс или идентификатор, который вы можете указать, чтобы это могло срабатывать).

http://api.jquery.com/event.preventDefault/

0

Не рекомендуется использовать синхронную функцию для вызовов ajax, поскольку она может временно заблокировать браузер. Обратите внимание на следующую цитату от jquery's ajax() page.

Обратите внимание, что синхронные запросы могут временно блокировать браузер, , отключение любых действий, пока запрос активен.

Вместо этого вы можете иметь кнопку, которая отправляет форму, вызывать функцию validateForm, и когда вызывается успех ajax, он может отправить форму.

function validateForm() { 
    var email = document.forms["contact"]["email"].value; 

    $.ajax({ 
     type: "POST", 
     url: "validateEmail.php", 
     data: "email=" + email, 
     success: function(result) { 
      if (result == true) 
       document.forms["contact"].submit(); 
     } 
    }); 
} 
0

Использование async: false является плохим способом использования AJAX, как вы загромождать ваш JavaScript без необходимости. Использование валидатора на стороне клиента, такого как jQuery Validate, является опасным, так как злоумышленник может отключить javascript и отправить недопустимую форму. Проверка на стороне сервера является обязательной, и это можно сделать с помощью старого старого AJAX!

Ключ - это обратный вызов. Все, что вы пытаетесь вернуть с validateForm, будет возвращено перед возвратом вашего вызова AJAX, поскольку AJAX является асинхронным (неблокирующим). Это означает, что вы не можете вернуть значение из своей функции успеха AJAX, не приостанавливая выполнение всего javascript. Вместо этого вы передаете функцию обратного вызова в качестве параметра, который может вызвать функция успеха AJAX. Внутри этого обратного вызова вы можете выполнить свою логическую проверку, чтобы выяснить, как действовать. Вы также можете сделать это непосредственно внутри функции успеха (которая на самом деле является обратным вызовом!), Но параметр обратного вызова и другие функции немного развязывают код, что является хорошей практикой. Я изменил ваш код, чтобы дать вам пример того, что я имею в виду.

function validateForm(callback) { 
    var email = document.forms["contact"]["email"].value; 
    var validEmail; 

    $.ajax({ 
     type: "POST", 
     url: "validateEmail.php", 
     data: "email=" + email, 
     success: function(result) { 
      validEmail = result; 
      console.log('result: ' + validEmail); 
      callback(result); 
     } 
    }); 
} 

function doSomethingWithResult(result) { 
    if (result === True) { 
     // Do true stuff 
    } else { 
     // Do false stuff 
    } 
} 

validateForm(doSomethingWithResult); 
Смежные вопросы