<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Поисковый механизм с использованием технологии AJAX</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<div id="answerDiv">
</div>
<div id="formDiv">
<label for="phoneOrName">Ведите телефон или фамилию: </label><br><input id="phoneOrName" name="phoneOrName" type="text"><br>
<button id="findButton">Найти</button>
</div>
</body>
</html>
var xhr = new XMLHttpRequest();
window.onload = function()
{
document.getElementById('phoneOrName').focus();
document.getElementById('findButton').onclick = function() { checkPhoneOrNameFormat(); };
document.getElementById('phoneOrName').onkeydown = function(e) { if(e.keyCode == 13) { checkPhoneOrNameFormat(); } };
};
function checkPhoneOrNameFormat()
{
if(!document.getElementById('phoneOrName').value)
{
alert('Укажите номер телефона или фамилию!');
document.getElementById('phoneOrName').focus();
return;
}
if(/^[\d\-\+\s]{1,}$/i.test(document.getElementById('phoneOrName').value))
{
if(/^\+\d\s\d\d\d\s\d\d\d\-\d\d\-\d\d$/i.test(document.getElementById('phoneOrName').value)) searchPhoneOrName();
else
{
alert('Номер телефона должен иметь формат +7 XXX XXX-XX-XX');
document.getElementById('phoneOrName').focus();
return;
}
}
else
{
if(/^[а-яА-ЯёЁ\s]{1,}$/i.test(document.getElementById('phoneOrName').value)) searchPhoneOrName();
else
{
alert('Фамилия может содержать только символы русского алфавита');
document.getElementById('phoneOrName').focus();
return;
}
}
}
function searchPhoneOrName()
{
document.getElementById('answerDiv').innerHTML = 'Поиск данных...';
xhr.open("GET", "scripts.php?phoneOrName="+encodeURIComponent(document.getElementById('phoneOrName').value), true);
xhr.responseType = 'text';
xhr.send();
}
xhr.onload = function()
{
document.getElementById('answerDiv').innerHTML = xhr.response;
};
<?
header('Content-Type: text/plain; charset=utf-8');
$dbhost = 'localhost';
$dbname = '******_education';
$dbuser = '******_education';
$dbpass = '******';
mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($dbname);
mysql_query("set names utf-8;");
mysql_query("set collation_connection=utf8_general_ci;");
$searchResource = mysql_query("select user_name, user_phone from education_users where user_name = '{$_GET['phoneOrName']}' or user_phone = '{$_GET['phoneOrName']}';");
if(mysql_num_rows($searchResource))
{
$currentRecord = mysql_fetch_row($searchResource);
mysql_close();
print $currentRecord[0].': '.$currentRecord[1];
return;
}
mysql_close();
if(strpos($_GET['phoneOrName'], '+') === false) print "Ошибка! Пользователь <b>{$_GET['phoneOrName']}</b> не найден.";
else print "Ошибка! Пользователь с номером телефона <b>{$_GET['phoneOrName']}</b> не найден.";
return;
?>
Результат выполнения задания можно посмотреть
здесь.