ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Ajax обращение к базе данных

Ajax обращение к базе данных

Вопросы взаимодействия Ajax и PHP рассматривались в разделе jQquery. В простых примерах приведенных там, более детальное внимание уделялось работе JavaScript кода, тогда как обработка Ajax запросов серверными страницами, практически оставалась за рамками разбираемых скриптов. Вашему вниманию предлагается более сложный пример АJАХ-загрузки данных на сервер. В этом примере будет задействована база данных. Как это сообразуется с Ajax запросами нам предстоит рассмотреть.

Создадим страницу, выводящую список пользователей в виде ссылок на информацию о пользователе, открывающуюся без перезагрузки страницы.

Для этого воспользуемся знакомой нам по предудущим примерам базой данных test и таблицей userjson.

Структура таблицы userjson:


CREATE TABLE IF NOT EXISTS `userjson` (
`id` int(11) NOT NULL,
`login` varchar(15) NOT NULL,
`password` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`date` datetime NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=41 DEFAULT CHARSET=utf8;

Выведем текущих пользователей базы данных в виде списка ссылок, при этом каждую ссылку будем снабжать атрибутом data-id со значением поля id из таблицы userjson.

>data-id - является атрибутом HTML5 и создан для хранения параметров и получения их в js. Любой атрибут, чье имя начинается с data-, является data-* атрибутом.

В jQuery получить значение таких атрибугов можно через специальный метод data(),например $(this).data("id").

Файл test1.php со списком пользователей.


<!DOCTYPE html>
<html>
<title>Ajax обращение к базе данных</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.hidden{display:none}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".main > div >a").on("click", function(){
//формируем ссылку для обращения к Ajax
var url = "user.php?id=" + $(this).data('id');
$.ajax({
url:encodeURI(url)
})
.done(function(data){
$("#info").html(data).removeClass("hidden");
})

})
})
</script>
<body class="w3-light-grey">
<div id="list">
<?php
// Устанавливаем соединение с базой данных
$pdo = new PDO("mysql:host =localhost; dbname=test","root","root");
$usr = $pdo->query( "SELECT * FROM userjson ORDER BY login");
try{
echo "<div class='main'>";
while($user = $usr->fetch()){
echo "<div><a href='#'"."data-id='".$user['id']."'>".htmlspecialchars($user['login'])."</a></div>";
}
echo "<div>";

}catch(PDOException $e){
echo "Ошибка в выполнении запроса ".$e->getMessage();
}

?>
<div class="hidden" id="info"></div>
</div>
</body>
</html>

Главная страница содержит два основных блока: первый div-блок с идентификатором liзt для вывода списка пользователей, второй div-блок с идентификатором info предназначен для вывода информации, полученной от сервера. Изначально результирующий div-блок info скрыт при помощи СSS-класса hidden:

При переходе по ссылке срабатывает обработчик события click, в результате чего осуществляется АJАХ-запрос к странице user.php?id=N, rде N- идентификатор пользователя в таблице userjson. После загрузки данных и помещения их в div-блок info, СSS-класс hidden, скрывающий этот блок, удаляется при помощи метода removeClaзs().

Для установки соединения с базой данных мы используем расширение PDO. Расширение PDO предоставляет интерфейс для доступа к базам данных и РНР. Механизму PDO необходим драйвер конкретной базы данных, в нашем случае PDO_MYSQL. До введения расширения PDO для каждой базы данных использовалось собственное уникальное расширение, функции предоставляемые таким расширением имели префикс, совпадающий с названием базы данных, например, mysql_query(), mssql_query(), pg_ query(). Переход с одной базы данных на другую требовал изменения кода. Новая объектно-ориентированная библиотека PDO предоставляет одинаковый интерфейс для всех типов баз данных, значительно облегчая переход от одной базы данных к другой.

Для установки расширения в операционной системе Windows необходимо отредактировать конфигурационный файл php.ini, раскомментировав строку:

extension=php_pdo_mysql.dll

Для того чтобы установить соединение с базой данных, необходимо создать объект класса PDO.

PDO::__construct(
string $dsn [,
string $username[,
string $password[,
array $options]]]) 

Конструктор класса принимает в качестве первого параметра источник данных $dsn, содержащий название драйвера, адрес сервера и имя базы данных. Вторым параметром susername принимается имя пользователя, а третий Spassword - его пароль. Последний параметр $options задает ассоциативный массив с дополнительными параметрами PDO и драйвера базы данных.

В нашем случае это будет так:

$pdo = new PDO("mysql:host =localhost; dbname=test","root","root");

Метод query() объекта РОО возвращает объект результирующей таблицы $usr. Извлечение данных осуществляется при помощи метода fetch. За один вызов функция извлекает из результирующей таблицы одну запись, которая представляется в виде ассоциативного массива $user.

В качестве ключей массива выступают имена столбцов таблицы userjason, а в качестве значений - элементы результирующей таблицы. Повторный вызов метода fetch() приводит к извлечению следующей строки и т. д. Поэтому вызов функции в цикле while() приводит к последовательному извлечению всех строк результирующей таблицы до тех пор, пока записи в результирующей таблице не закончатся и метод не вернет false, что приведет к выходу из цикла.

Осуществлять проверку после каждого выполненного запроса не очень удобно. Лучше воспользоваться механизмом исключений.

try{

}catch(PDOException $e){
 echo "Ошибка в выполнении запроса  ".$e->getMessage(); 
  }

Извлечение информации о пользователе файл user.php


<?php
// Устанавливаем соединение с базой данных
$pdo = new PDO("mysql:host=localhost; dbname=test","root","tktyf");

try{
if(!empty($_GET['id'])){
//запрашиваем данные пользователя
$query = "SELECT * FROM userjson WHERE id = :id";
$usr = $pdo->prepare($query);
$usr->execute(['id' => $_GET['id']]);
$user =$usr->fetch();

//Обрабатываем данные перед выводом
$user['login'] = htmlspecialchars($user['login']);
$user['email'] = htmlspecialchars($user['email']);
//Формируем ответ
echo "<p>".
"<span>Логин: </span>".
"<span>".$user['login']."</span>".
"</p>";
echo "<p>".
"<span>Email: </span>".
"<span>".$user['email']."</span>".
"</p>";
echo "<p>".
"<span>Время регистрации: </span>".
"<span>".$user['date']."</span>".
"</p>";
}else{
exit("Ошибка в передаче данных");
}
}catch(PDOException $e){
echo "Ошибка в выполнении запроса ".$e->getMessage();
}
?>

В большинстве случаев SQL-запросы будут содержать какие-то значения, которые должны быть подставлены в SQL-зanpoc. Для того чтобы выполнить такой запрос, воспользуемся параметризованными запросами. Такой запрос проходит несколько стадий: подготовки, связывания с переменными и выполнения.

Запросы, в которых используются параметры, передаются специальному методу prepare(}. Сам запрос, как видно, содержит параметр :id, который заполняется на этапе выполнения методом execute(). Для заполнения параметра методу execute() передается ассоциативный массив, ключи которого содержат названия параметров. Параметры могут быть безымянными, в запросе они обозначаются символом вопроса ?. Методу же execute() передается индексный массив, элементы которого заменят символы ? в параметризованном запросе. Первый знак вопроса заменяется первым элементом, второй - вторым и т. д.

Скрипт user.php получает GЕT-параметр id и извлекает соответствующую ему информацию из таблицы users. После этого формируются строки "параметр/значение" со следующей структурой:

<p><span>napaмeтp</span><span>знaчeниe</span></p>

Такая организация данных, дополненная СSS-классами, позволяет позиционировать и оформлять данные в довольно широком диапазоне.

Протестируем наши скрипты. Форма регистрации пользователе находится здесь.

<!DOCTYPE html>
<html>
<title>Ajax обращение к базе данных</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link href="../../css/w3.css" rel="stylesheet" type="text/css">
<style>
.hidden{display:none}
#info{ border: rgba(110,106,106,1.00) solid 1px;
border-radius:4px;
padding:5px;
margin-top:20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".main > div >a").on("click", function(){
//формируем ссылку для обращения к Ajax
var url = "user.php?id=" + $(this).data('id');
$.ajax({
url:encodeURI(url)
})
.done(function(data){
$("#info").html(data).removeClass("hidden");
})

})
})
</script>
<body class="w3-light-grey">
<div class="w3-content w3-layout-container" >
<div class="w3-twothird w3-col s10" style="margin:0 10%">
<div class="w3-container w3-card-2 w3-white w3-margin-bottom" style="height:550px" >
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-indent fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Ajax обращение к базе данных</h2>
<div id="list">
<?php
// Устанавливаем соединение с базой данных
$pdo = new PDO("mysql:host=localhost; dbname=srv73637_test","srv73637_admin","tktyf");
$usr = $pdo->query( "SELECT * FROM userjson ORDER BY login");
try{
echo "<div class='main'>";
while($user = $usr->fetch()){
echo "<div><a href='#'"."data-id='".$user['id']."'>".htmlspecialchars($user['login'])."</a></div>";
}
echo "<div>";

}catch(PDOException $e){
echo "Ошибка в выполнении запроса ".$e->getMessage();
}

?>
<div class="hidden" id="info"></div>
</div>
</div>
</div>
</div>
<div style=" clear:both"></div>
<footer class="w3-container w3-teal w3-center w3-margin-top " style="height:80px; padding-top:20px;">
<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>
<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>
<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>
<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>
<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>
</footer>
</div>
</body>
</html>
<?php
// Устанавливаем соединение с базой данных
$pdo = new PDO("mysql:host=localhost; dbname=srv73637_test","srv73637_admin","tktyf");

try{
if(!empty($_GET['id'])){
//запрашиваем данные пользователя
$query = "SELECT * FROM userjson WHERE id = :id";
$usr = $pdo->prepare($query);
$usr->execute(['id' => $_GET['id']]);
$user =$usr->fetch();

//Обрабатываем данные перед выводом
$user['login'] = htmlspecialchars($user['login']);
$user['email'] = htmlspecialchars($user['email']);
//Формируем ответ
echo "<p>".
"<span>Логин: </span>".
"<span>".$user['login']."</span>".
"</p>";
echo "<p>".
"<span>Email: </span>".
"<span>".$user['email']."</span>".
"</p>";
echo "<p>".
"<span>Время регистрации: </span>".
"<span>".$user['date']."</span>".
"</p>";
}else{
exit("Ошибка");
}
}catch(PDOException $e){
echo "Ошибка в выполнении запроса ".$e->getMessage();
}
?>