Вот форма, в которой ajax проверяет существование пользователя.
<!DOCTYPE html> <html> <head><title>Register new user!</title> <script src="jquery-1.7.1.min.js"></script> </head> <body> Username: <input type="text" name="username" id="username"/><span id="user"></span><br/> Password: <input type="password" name="password" id="password"/><br/> <input type="button" value="Register" name="submit" id="submit" onclick="register_user();"/> </body> <script> function register_user() { $.ajax( { type:"POST", data:username, url:"userexists.php" }) .fail(function() { $('#user').html("This user already exists"); } ); } </script> </html> И вот модуль userexists.php
<?php // connection to the db define(IPHOST,"localhost"); define(DBPASSWORD,""); define(DBUSER,"root"); define(DATABASE,"ajaxtest"); define(TABLENAME,"at"); $conn=mysql_connect(IPHOST,DBUSER,DBPASSWORD) or die(mysql_error()); mysql_select_db(DATABASE) or die(mysql_error()); $username=$_POST('username'); $sql="SELECT username FROM ".TABLENAME." WHERE username=".$username; $query=mysql_query($sql); if(0!=mysql_numrows($query)) { // } else { } ?>
Но я застрял, чтобы действительно понять, как работает функция ajax, что я должен ввести пустое поле после того, как я знаю, что введенное имя пользователя было использовано, например? Я вообще не понимаю аякса.
[ UPDATE ] Спасибо, я понимаю это сейчас, у меня есть несколько ответов, не знаю, какой из них выбрать, как лучший ответ. Нет выбора для выбора.
У вас много ошибок в коде, попробуйте коды ниже:
<!DOCTYPE html> <html> <head><title>Register new user!</title> <script src="jquery-1.7.1.min.js"></script> </head> <body> Username: <input type="text" name="username" id="username"/><span id="user"></span><br/> Password: <input type="password" name="password" id="password"/><br/> <input type="button" value="Register" name="submit" id="submit" onclick="register_user();"/> </body> <script> function register_user() { $.ajax({ type: "POST", data: { username: $('#username').val(), }, url: "userexists.php", success: function(data) { if(data === 'USER_EXISTS') { $('#user') .css('color', 'red') .html("This user already exists!"); } else if(data === 'USER_AVAILABLE') { $('#user') .css('color', 'green') .html("User available."); } } }) } </script> </html>
И для вашего php-кода:
<?php // connection to the db define(IPHOST,"localhost"); define(DBPASSWORD,""); define(DBUSER,"root"); define(DATABASE,"ajaxtest"); define(TABLENAME,"at"); $conn=mysql_connect(IPHOST,DBUSER,DBPASSWORD) or die(mysql_error()); mysql_select_db(DATABASE) or die(mysql_error()); $username = mysql_real_escape_string($_POST['username']); // $_POST is an array (not a function) // mysql_real_escape_string is to prevent sql injection $sql = "SELECT username FROM ".TABLENAME." WHERE username='".$username."'"; // Username must enclosed in two quotations $query = mysql_query($sql); if(mysql_num_rows($query) == 0) { echo('USER_AVAILABLE'); } else { echo('USER_EXISTS'); } ?>
Поскольку вы новичок в AJAX, позвольте мне попытаться помочь вам немного лучше с некоторыми объяснениями, когда мы идем.
AJAX означает Asynchronous Javascript и XML. Используя его, вы можете сделать запрос на другую страницу, и ваша исходная страница будет вести себя по-разному в соответствии с результатами, полученными на другой странице.
Итак, как это полезно? Что ж; Вы можете установить onblur даже в поле «имя пользователя», чтобы проверить удаленный скрипт, чтобы узнать, используется ли уже имя пользователя. (Что вы уже делаете в своей текущей настройке. Хорошая работа!)
В первую очередь; .fail () сообщает вашей текущей странице «Если запрос ajax завершается с ошибкой, сделайте этот код». Это называется обратным вызовом. Обратный вызов является функцией кода javascript для выполнения, когда асинхронный запрос завершен.
Так что вы действительно хотите использовать метод .done (). Это говорит о вашем запросе jQuery «Эй, когда вы закончите делать этот запрос, сделайте этот кусок кода. Пока вы это делаете, я собираюсь сидеть здесь и обрабатывать все остальное, что происходит».
Таким образом, вы можете видеть, что существует небольшая разница между использованием .done () и .fail (), однако я вижу, как вас можно легко смутить с .fail (), являющимся новым для ajax.
Поэтому давайте вернемся к вашей текущей проблеме. Давайте изменим ajax на нечто большее:
$("#submit").click(function() { $.ajax({ type: "POST", data: "username="+$("#username").val(), url: "userexists.php" }) .done(function(response){ $('#user').html(response); }); });
Это означает привязать обработчик onclick для вашей кнопки отправки с идентификатором «submit». Итак, теперь вы можете удалить onclick = "register_user". Во-вторых, в нем говорится: «Привет, веб-страница, пошлите userexists.php значение поля имени пользователя с именем имени параметра. Когда вы закончите этот запрос, установите html #user в ответ.
Так что это идет и делает это.
Теперь ваш файл PHP вы можете сделать:
<?php // connection to the db define(IPHOST,"localhost"); define(DBPASSWORD,""); define(DBUSER,"root"); define(DATABASE,"ajaxtest"); define(TABLENAME,"at"); $conn = mysql_connect(IPHOST,DBUSER,DBPASSWORD) or die(mysql_error()); mysql_select_db(DATABASE) or die(mysql_error()); $username = mysql_real_escape_string($_POST['username']); // Stop some MySQL injections $sql="SELECT username FROM ".TABLENAME." WHERE username='$username'"; $query=mysql_query($sql); if(mysql_numrows($query) == 0) { echo 'Username is available!' } else { echo 'Sorry, username is in use.'; } ?>
Поэтому, как только ваш скрипт выполнит свой запрос, если он найдет результат, он скажет в div HTML «Имя пользователя доступно!». В противном случае, если он найдет совпадение, в нем говорится: «Извините, имя пользователя недоступно».
Надеюсь, это поможет вам понять ajax немного лучше!
Это технически зависит от вас. (Например) Вы можете вернуть «1» для «user exists» и «0» для «пользователь не существует» или вернуть более подробный XML. Клиентское приложение (Javascript) прочитает возвращаемый результат и распечатает соответствующее сообщение пользователю.
Метод .fail следует использовать в случае сбоя вашей функции (ошибка на стороне сервера и т. Д.). Поэтому вам не кажется нужным то, что вы пытаетесь сделать. Я бы поставил в свой код .done () тест возвращаемых значений, как описано выше, и распечатать правильное сообщение.
Javascript:
.done(function ( data ) { if(data == "0") alert("Your username is OK"); else alert("Your username is already used"); });
PHP:
if(0!=mysql_numrows($query)) { echo "0"; } else { echo "1"; }
Функция .fail в ajax используется, когда сервер возвращает неожиданные данные. Но ваш php-код ничего не возвращает. Используйте что-то вроде этого:
function register_user() { $.ajax( { type:"POST", data:username, url:"userexists.php" }) .done(function(_return) { if(_return) { if(_return['status']=='yes') { $('#user').html(_return['msg']); } } }) .fail(function()); }
И в php:
if(0!=mysql_numrows($query)) { $return = array('status'=>'yes', 'msg'=>"User alredy exist"); echo json_encode($return); return true; }
Теперь вы можете добавить больше условий со многими статусами и проанализировать их в javascript.