В эпоху современного веба, большинство сайтов становятся все более интерактивными. Если ранее для получения обновленных данных нам нужно было обновить полностью страницу, то сейчас появились технологии которые позволяют полностью страницу не загружать, а только лишь отдельную ее часть. В свою очередь это предоставляет удобство как пользователям так и владельцам серверов, ведь для пользователя загрузка страницы будет быстрее, так как загружается только отдельная часть страницы, а серверу не нужно каждый раз генерировать страницу и отдавать ее пользователю. Эти возможности просто реализовать при помощи php и ajax.
Сегодня мы разберем небольшой пример для лучшего понимания работы концепции AJAX. Иногда новичкам бывает трудно понять каким же образом взаимодействует между собой php и ajax, много людей ищут примеры того как валидировать формы на лету без перезагрузки всей страницы. Я вам вкратце покажу как это делается, для того, чтобы вы могли понять основы и принципы которые позволят вам в будущем более быстро освоить другие инструменты и писать свои собственные скрипты.
Придумаем небольшое задание себе, будем проверять наличие email адреса в базе данных без перезагрузки страницы используя php и ajax. Такой пример хорошо продемонстрирует как мы можем взаимодействовать с сервером без перезагрузки страницы в браузере, а также, это часто используется при различного рода валидациях пользовательских форм. В корневом каталоге создадим 3 файла с именами index.php, email.php, validate.js.
Создание страницы
Создадим простую страницу с одной формой, которая содержит только одно поле для ввода email.
Синтаксис файла index.php
<!DOCTYPE html> <html> <title>AJAX Tutorial</title> <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> <script src="validate.js"></script> <body> <form method="post" action=""> <input type="email" name="email" id="email" placeholder="Ener email"> <span id="message"></span> <input type="button" id="submit" value="Register"> </form> </body> </html>
Самый простой способ работать с AJAX — это подключить фреймворк jQuery, что собственно я и сделал. jQuery предоставляет нам простой в понимании и работе синтаксис для отправки AJAX запросов, почему бы не использовать это преимущество?
Создание js скрипта
Синтаксис файла validate.js
$(document).ready(function(){
var email = '';
$('#email').keyup(function(){
var value = $(this).val();
$.ajax({
type:'POST',
url:'email.php',
data:'email='+value,
success:function(msg){
if(msg == 'valid'){
$('#message').html('<font color="green">Этот Email можно использовать.</font>');
email = value;
}else{
$('#message').html('<font color="red">Этот Email уже занят.</font>');
}
}
});
});
$('#submit').click(function(){
if(email == ''){
alert('Please, put data to all email');
}else{
$.ajax({
type: 'POST',
url:'email.php',
data:'add_email='+email,
success:function(msg){
$('#message').html(msg);
}
});
}
});
});
Обработчик на php
Этот скрипт будет получать POST запрос от клиента, обрабатывать его и возвращать результат. AJAX считывает результат и на его основе принимает решение.
Синтаксис файла email.php
$connection = mysqli_connect("localhost","email","email","email");
if(isset($_POST['email']) && $_POST['email'] != ''){
$email = $_POST['email'];
$email = mysqli_real_escape_string($connection,$email);
if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
echo 'invalid';
}else{
$sql = "SELECT id FROM email WHERE email='$email'";
$result = mysqli_query($connection,$sql);
if(mysqli_num_rows($result) == 1){
echo 'invalid';
}else{
echo 'valid';
}
}
}
if(isset($_POST['add_email']) && $_POST['add_email'] != ''){
$email = mysqli_real_escape_string($connection,$_POST['add_email']);
$sql = "INSERT INTO email(email) VALUES('$email')";
if(mysqli_query($connection,$sql)){
echo <font color="green">Success</font>';
}else{
echo '<font color="red">Error</font>';
}
}
В нашем php скрипте, самый обычный код, который обрабатывает post запрос и печатает на странице определенный текст. В результате AJAX отправляет запрос php скрипту, скрипт его обрабатывает и выдает результат, AJAX считывает результат и изменяет страницу в реальном времени.
AJAX передает POST запрос скрипту посредством этого участка кода:
$.ajax({
type:'POST',
url:'email.php',
data:'email='+value,
success:function(msg){
if(msg == 'valid'){
$('#message').html('Этот Email можно использовать.');
email = value;
}else{
$('#message').html('Этот Email уже занят.');
}
}
});
type - Тип запроса, POST или GET. В нашем случае POST;
url - адрес скрипта которому отправляют запрос;
data - данные которые передаются в запросе;
success - что делать в результате успешного выполнения запроса. В нашем случае вызывается функция;
В самом скрипте, проверка наличия email в базе выполняется при каждом вводе символа в поле email. В скрипте за обработку ввода отвечает участок $('#email').keyup(function(){});, который проверяет нажатие клавиши в поле с id = "email".
Как видите, код довольно простой и не требует особо больших навыков для понимания, все завязано на обработке событий keyup() - нажатие клавиши, click() - клик мышкой по элементу. Далее следует AJAX запрос и ответ от скрипта. Таким образом используя php и ajax можно можно получить практически безграничные возможности для создания интерактивных страниц.
Данный код не претендует на звание высококачественного, но если развить, добавить правильных валидаций на уровне клиента и сервера, ввести css, то вполне можно использовать в своих проектах.
Если у вас возникли вопросы, не стесняйтесь, пишите комментарии.
Желаю вам хорошего дня и до скорых встреч 🙂
Файлы примеров.
В статье в файле email.php одна функция, но если записать две функции в файл.
Как обратиться к конкретной функции в email.php файле из javaScript по средством ajax?
В параметре ajax( success:function(msg)), function(msg) — это функция javaScript или PHP?
Обратится к конкретной функции можно посредством POST запроса, так как это сделано в файле
email.php.ajax( success:function(msg)),function(msg)— это js.Хорошая статья, лаконичная и по делу. Уважуха и респект автору. мне именно этого не хватало. благодарю и успехов
Совсем не «хорошая» и не «лаконичная».
Как-же вы задолбали, объяснятели. Вы не понимаете, что просто создаёте информационный шум, забиваете пространство в поисковике своими постами?
Ну вот у вас, автор, заголовок: «Простой пример использования PHP и AJAX.»
Почему нельзя убрать ВСЁ лишнее? Чтобы пример был простой, как обещано. Зачем здесь валидность email и sql?
Остановись на уровне 2+2 => передали.
Даже спустя 3 года после написания этой статьи люди постоянно задают вопрос «Как сделать регистрацию через AJAX, как в базу вставить значения», даже при том что знают как сделать сам аякс кол.
Потому тут с какой стороны посмотреть, с одной шум, с другой нет.