PHP - AJAX и MySQL
В этом уроке мы наглядно проиллюстрируем, насколько просто получить доступ к информации из базы данных с помощью AJAX, мы собираемся создавать запросы MySQL на лету и отображать результаты в виде таблицы HTML.
Пример работы с Ajax, PHP и MySQL
В следующем примере показано, как веб-страница может получать информацию из базы данных с помощью AJAX. Вы можете из выпадающего списка выбрать одного из клиентов и увидите, что, без перезагрузки страницы, необходимая информация будет отображаться ввиде таблицы HTML:
Example
Таблица примера работы с Ajax и MySQL
В базе данных demo создадим таблицу ajax_demo:
Пример
Скопировать <?php
/* Попытка подключения к серверу MySQL. Предполагая, что вы используете MySQL сервер с настройкой по умолчанию (пользователь root без пароля) */
$link = mysqli_connect("localhost", "root", "", "demo");
// Проверка подключения
if($link === false){
die("ERROR: Ошибка подключения. " . mysqli_connect_error());
}
// Попытка выполнить запрос на создание таблицы
$sql = "CREATE TABLE ajax_demo (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
age int(11) NOT NULL,
hometown VARCHAR(30) NOT NULL,
job VARCHAR(30) NOT NULL
) ";
if(mysqli_query($link, $sql)){
echo "Таблица успешно создана.";
} else{
echo "ERROR: Не удалось выполнить $sql. " . mysqli_error($link);
}
// Закрыть соединение
mysqli_close($link);
?>Теперь выгрузите следующие данные в эту таблицу, используя следующие операторы SQL:
Пример
Скопировать<?php
/* Попытка подключения к серверу MySQL. Предполагая, что вы используете MySQL
сервер с настройкой по умолчанию (пользователь root без пароля) */
$link = mysqli_connect("localhost", "root", "", "demo");
// Проверка подключения
if($link === false){
die("ERROR: Ошибка подключения. " . mysqli_connect_error());
}
// Попытка выполнения запроса вставки
$sql = "INSERT INTO ajax_demo (firstname, lastname, age, hometown, job) VALUES
('Ivan', 'Ivanov', 30, 'Moskow', 'designer'),
('Stepan', 'Stepanov', 32, 'Kiev', 'manager'),
('Maxim', 'Maxsimov', 33, 'London', 'boss'),
('Irina', 'Sidorova', 35, 'Varshava', 'programmer')";
if(mysqli_query($link, $sql)){
echo "Записи успешно вставлены.";
} else{
echo "ERROR: Не удалось выполнить $sql. " . mysqli_error($link);
}
// Закрыть соединение
mysqli_close($link);
?>В результате мы получим следующую таблицу, которую будем исползовать в этом уроке:
Объяснение примера работы с Ajax и MySQL
В приведенном в начале урока примере, когда пользователь выбирает человека в раскрывающемся списке, выполняется функция showUser().
Функция showUser() запускается событием onchange:
Пример
Попробуй сам »<!DOCTYPE html>
<html>
<head>
<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Выберите человека:</option>
<option value="1">Ivan Ivanov</option>
<option value="2">Stepan Stepanov</option>
<option value="3">Maxsim Maxsimov</option>
<option value="4">Irina Sidorova</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
Пояснение к коду:
Сначала проверим, выбран ли человек из списка. Если никто не выбран (str == ""), то очистим содержимое элемента с id=txtHint и выйдем из функции. Если же человек выбран, то выполним следующие шаги:
- Создадим объект var xmlhttp = new XMLHttpRequest();
- Создадим функцию xmlhttp.onreadystatechange, которая будет выполняться, когда будет готов ответ сервера if (this.readyState == 4 && this.status == 200)
- Отправим запрос в php-файл getuser.php на сервере
- Обратите внимание, что к URL-адресу добавлен параметр (q) (с содержимым раскрывающегося списка)
Файл-обработчик для работы с Ajax и MySQL
Страница на сервере, вызываемая выше приведенным JavaScript, представляет собой PHP-файл "getuser.php".
Исходный код в файле "getuser.php" выполняет запрос к базе данных MySQL и возвращает результат в таблице HTML:
Пример
Скопировать<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$con = mysqli_connect('localhost','root','','demo');
if (!$con) {
die('Ошибка подключения: ' . mysqli_error($con));
}
mysqli_select_db($con,"demo");
$sql="SELECT * FROM ajax_demo WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['firstname'] . "</td>";
echo "<td>" . $row['lastname'] . "</td>";
echo "<td>" . $row['age'] . "</td>";
echo "<td>" . $row['hometown'] . "</td>";
echo "<td>" . $row['job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>Объяснение кода: Когда запрос отправляется из JavaScript в файл PHP, происходит следующее:
- PHP открывает соединение с сервером MySQL
- Выполняется поиск выбранного человека из списка
- Создается таблица HTML, заполняется данными и отправляется обратно в элемент-заполнитель "txtHint".
