PHP Учебник

PHP Старт Введение в PHP Установка PHP Синтаксис PHP Комментарии в PHP Переменные PHP PHP Echo / Print Типы данных PHP Строки PHP Числа PHP Математика в PHP Константы PHP Операторы PHP PHP If...Else...Elseif PHP Switch Циклы в PHP Функции PHP Массивы PHP PHP Суперглобальные PHP RegEx

PHP Формы

Обработка форм PHP Валидация форм PHP Обязательные поля Валидация URL/E-mail Полная форма PHP

PHP Продвинутый

PHP Дата и время PHP Include/Require PHP Работа с файлами Открытие/Чтение файлов Создание/Запись файлов PHP Загрузка файлов Файлы cookie PHP Сессии PHP Фильтры PHP Расширенные фильтры PHP Функция Callback PHP JSON PHP Исключения

PHP OOP

Что такое ООП в PHP Классы/Объекты PHP Цепочки методов PHP Конструктор PHP Деструктор PHP Модификаторы доступа Наследование в PHP Константы класса PHP Подсказка типов PHP Подсказка интерфейсов Абстрактные классы PHP PHP Интерфейсы PHP Полиформизм PHP Трейты Статические методы PHP Статические свойства PHP Пространства имен PHP Итерируемые объекты

База данных MySQL

База данных MySQL Подключение к MySQL Создание БД MySQL Создание таблицы MySQL Вставка данных MySQL Получить ID MySQL Подготовленные операторы PHP MySQL Получение данных MySQL Предложение WHERE Предложение ORDER BY Обновление данных MySQL Удаление данных БД MySQL Limit Data

PHP XML

Парсеры PHP XML Парсер PHP SimpleXML Получить PHP SimpleXML PHP XML Expat PHP XML DOM

PHP - AJAX

AJAX Введение AJAX PHP AJAX База Данных AJAX XML AJAX Живой поиск AJAX Опрос

PHP Примеры

PHP Примеры Практика ООП PHP PHP квиз-тест Упражнения Базовый PHP Упражнения Алгоритмы Упражнения Массивы Упражнения Цикл for Упражнения Функции Регулярные выражения Упражнения Дата PHP Упражнения Строки PHP Математика PHP Упражнения Формы PHP Упражнения Классы PHP Упражнения JSON PHP PHP Задачник


PHP - AJAX и MySQL




В этом уроке мы наглядно проиллюстрируем, насколько просто получить доступ к информации из базы данных с помощью AJAX, мы собираемся создавать запросы MySQL на лету и отображать результаты в виде таблицы HTML.


В следующем примере показано, как веб-страница может получать информацию из базы данных с помощью AJAX. Вы можете из выпадающего списка выбрать одного из клиентов и увидите, что, без перезагрузки страницы, необходимая информация будет отображаться ввиде таблицы HTML:

Example


Информация о человеке будет указана здесь...

В базе данных 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) (с содержимым раскрывающегося списка)

Страница на сервере, вызываемая выше приведенным 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, происходит следующее:

  1. PHP открывает соединение с сервером MySQL
  2. Выполняется поиск выбранного человека из списка
  3. Создается таблица HTML, заполняется данными и отправляется обратно в элемент-заполнитель "txtHint".




Профессия‌ ‌PHP-разработчик‌ Совет эксперта
Освойте PHP и MySQL с нуля в игровой форме
Профессия‌ ‌PHP-разработчик‌ Совет эксперта
На рынке не хватает веб-разработчиков
Профессия‌ ‌PHP-разработчик‌
На рынке не хватает веб-разработчиков
Профессия‌ ‌PHP-разработчик‌ Совет эксперта
Освойте популярный PHP-фреймворк
Профессия‌ ‌PHP-разработчик‌ Совет эксперта
На рынке не хватает fullstack-разработчиков!
PHP-разработчик с нуля до PRO
Обучение в рассрочку
Профессия‌ ‌PHP-разработчик‌ Совет эксперта
Учитесь сейчас, платите потом!
Профессия‌ ‌PHP-разработчик‌ Выберите специальность
Учитесь сейчас, платите потом!