PHP - AJAX и MySQL
AJAX можно использовать для интерактивного взаимодействия с базой данных.
Пример AJAX с базой данных
В следующем примере показано, как веб-страница может считывать информацию из базы данных через AJAX:
SQL-файл для таблицы Websites, используемой в этом руководстве:websites.sql.
Пример
Выберите вариант, и информация о веб-сайте будет отображаться здесь...
Объяснение примера - База данных MySQL
В приведённом выше примере таблица базы данных, которую мы используем, показана ниже:
mysql> select * from websites; +----+--------------+---------------------------+-------+---------+ | id | name | url | alexa | country | +----+--------------+---------------------------+-------+---------+ | 1 | Google | https://www.google.cm/ | 1 | USA | | 2 | 淘宝 | https://www.taobao.com/ | 13 | CN | | 3 | Example | http://www.example.com/ | 4689 | CN | | 4 | 微博 | http://weibo.com/ | 20 | CN | | 5 | Facebook | https://www.facebook.com/ | 3 | USA | +----+--------------+---------------------------+-------+---------+ 5 rows in set (0.01 sec)
Пояснение примера — HTML-страница
Когда пользователь выбирает веб-сайт в раскрывающемся списке выше, выполняется функция "showSite()". Функция запускается событием "onchange":
Код файла test.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример (example.com)</title>
<script>
function showSite(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
//Браузеры IE7+, Firefox, Chrome, Opera, Safari выполняют код
xmlhttp=new XMLHttpRequest();
}
else
{
//Браузеры IE6, IE5 выполняют код
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getsite_mysql.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showSite(this.value)">
<option value="">Выберите веб-сайт:</option>
<option value="1">Google</option>
<option value="2">Taobao</option>
<option value="3">Example</option>
<option value="4">Weibo</option>
<option value="5">Facebook</option>
</select>
</form>
<br>
<div id="txtHint"><b>Информация о веб-сайте будет отображаться здесь...</b></div>
</body>
</html>
Функция showSite() выполняет следующие шаги:
- Проверьте, выбран ли веб-сайт
- Создать объект XMLHttpRequest
- Создать функцию, которая будет выполнена, когда ответ сервера будет готов
- Отправить запрос к файлу на сервере
- Обратите внимание, что параметр (q) добавляется в конец URL (содержащий содержимое выпадающего списка)
Файл PHP
Серверная страница, вызываемая через JavaScript выше, — это PHP-файл с именем "getsite_mysql.php".
Исходный код в "getsite_mysql.php" выполняет запрос к базе данных MySQL и возвращает результат в HTML-таблице:
Код файла getsite_mysql.php:
$q = isset($_GET["q"]) ? intval($_GET["q"]) : '';
if(empty($q)) {
echo 'Пожалуйста, выберите веб-сайт';
exit;
}
$con = mysqli_connect('localhost','root','123456');
if (!$con)
{
die('Не удалось подключиться: ' . mysqli_error($con));
}
//Выбрать базу данных
mysqli_select_db($con,"test");
//Установить кодировку, чтобы предотвратить искажение китайских символов
mysqli_set_charset($con, "utf8");
$sql="SELECT * FROM Websites WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table border='1'>
<tr>
<th>ID</th>
<th>Название веб-сайта</th>
<th>URL веб-сайта</th>
<th>Рейтинг Alexa</th>
<th>Страна</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['url'] . "</td>";
echo "<td>" . $row['alexa'] . "</td>";
echo "<td>" . $row['country'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
Пояснение: Когда запрос отправляется из JavaScript в файл PHP, происходит следующее:
- PHP открывает соединение с базой данных MySQL
- Находит выбранный веб-сайт
- Создает HTML-таблицу, заполняет её данными и отправляет её обратно в заполнитель "txtHint"