<div>
<label for="nickname">Ник:</label>
<input type="text" placeholder="Введите ник..." id="nickname" name="nickname">
<div id="msg"></div>
</div>
<script type=""text/JavaScript">
var nickname = document.querySelector('#nickname');
var msg = document.querySelector('#msg');
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var result = JSON.parse(this.responseText);
//status == false ник занят
//status == true ник свободен
if(result['status'] === false){
msg.innerHTML = '❌ Этот ник занят!';
} else {
msg.innerHTML = '✅ Ник свободен';
}
}
};
nickname.addEventListener("blur", function(){
msg.innerHTML = '';
let data = new FormData();
data.append('nick', nickname.value);
xhttp.open("POST", "ajax.php", true);
xhttp.send(data);
});
</script><?php
// Получаем $_POST['nick']
// СОздаем запрос в бд типа
// SELECT id FROM users WHERE nick LIKE 's'
// читаем про подготовленные запросы
// Далее если id есть status = false иначе true
//status == false ник занят
//status == true ник свободен
// заворачиваем в JSON
// ТЕСТ без бд
//массив занятых ников
$nicks = ['admin', 'moderator', 'pushkin', 'tester', 'susanin', 'lev_tolstoi', 'administrator'];
//если $_POST['nick'] есть в массиве занятых, то статус false, если нет, то true
if (in_array(strtolower($_POST['nick']), $nicks)){
$status = false;
} else {
$status = true;
}
//заворачиваем в JSON и выводим
echo json_encode(['status' => $status]);
