AJAX Send

Простой пример использования PHP и AJAX.

В эпоху современного веба, большинство сайтов становятся все более интерактивными. Если ранее для получения обновленных данных нам нужно было обновить полностью страницу, то сейчас появились технологии которые позволяют полностью страницу не загружать, а только лишь отдельную ее часть. В свою очередь это предоставляет удобство как пользователям так и владельцам серверов, ведь для пользователя загрузка страницы будет быстрее, так как загружается только отдельная часть страницы, а серверу не нужно каждый раз генерировать страницу и отдавать ее пользователю. Эти возможности просто реализовать при помощи php и ajax.

Сегодня мы разберем небольшой пример для лучшего понимания работы концепции AJAX. Иногда новичкам бывает трудно понять каким же образом взаимодействует между собой php и ajax, много людей ищут примеры того как валидировать формы на лету без перезагрузки всей страницы. Я вам вкратце покажу как это делается, для того, чтобы вы могли понять основы и принципы которые позволят вам в будущем более быстро освоить другие инструменты и писать свои собственные скрипты.

Придумаем небольшое задание себе, будем проверять наличие email адреса в базе данных без перезагрузки страницы используя php и ajax. Такой пример хорошо продемонстрирует как мы можем взаимодействовать с сервером без перезагрузки страницы в браузере, а также, это часто используется при различного рода валидациях пользовательских форм. В корневом каталоге создадим 3 файла с именами index.php , email.php , validate.js .

Создание страницы

Создадим простую страницу с одной формой, которая содержит только одно поле для ввода email.
Синтаксис файла index.php

Самый простой способ работать с 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('Этот Email можно использовать.'); email = value; >else< $('#message').html('Этот Email уже занят.'); > > >); >); $('#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 Success'; >else< echo 'Error'; > >

В нашем 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, то вполне можно использовать в своих проектах.
Если у вас возникли вопросы, не стесняйтесь, пишите комментарии.
Желаю вам хорошего дня и до скорых встреч 🙂
Файлы примеров.

Источник

Как выполнить PHP скрипт через ajax?

Советую лучше переключиться на PHP фреймворки, так писать свои костыли уже давно не надобно. Хотя ради изучения можно.
Но советую переходить на фреймворки, меньше запар, плюс изучишь ООП,а это тебя продвинет на несколько шагов перед.

      Btn_yes Btn_no   

//"file.php" - Это тот файл на который будем отправлять AJAX запрос $("#btn_yes").on('click', function() < $.post("file.php", < btn_yes: "btn_yes">) .done(function( data ) < alert( "Сообщение: " + data ); >); >); $("#btn_no").on('click', function() < $.post("file.php", < btn_no: "btn_no">) .done(function( data ) < alert( "Сообщение: " + data ); >); >);

Код файла «file.php» (можете заменить на свой):

if( isset( $_POST['btn_yes'] )) < echo 'Отправлена кнопка btn_yes'; >if( isset( $_POST['btn_no'] ))

Все достаточно просто. PHP такой язык, что код в нем выполняется всякий раз, когда мы открывает страницу. Иными словами, для того чтобы выполнился код в некой условном файле test.php достаточно открыть его (скачать). На JavaScript для этого можно использовать fetch. Просто сделайте запрос по адресу вашего скрипта через fetch:
https://learn.javascript.ru/fetch

Войдите, чтобы написать ответ

Как сделать так чтобы, при отправки ajax события в data: < art: >, выходила два input и между ними -?

Источник

Отправка формы без перезагрузки страницы на PHP и Ajax

Постоянно приходится пользоваться этой заготовкой. Вы можете модернизировать ее под любые нужды, будь то форма обратной связи, форма обратного звонка или заказ какой-либо услуги или товара.

Поэтому я не буду украшать ее стилями, применять классы Bootstrap и различные скрипты, как например маска телефона. Это вы сможете сделать при необходимости в зависимости от задачи.

Используя только одно включение кода из этого примера, можно создать неограниченное количество различных форм на странице. Это будет актуально, например для сайтов лендингов, где на одной странице используется множество различных форм.

HTML-код формы

Для начала создадим саму форму на HTML. Для примера будем использовать только 3 поля: имя, телефон и сообщение.
Один важный момент: у тега обязательно должен быть id. Если на странице будут использоваться несколько форм, то id соответственно должны быть различные.

Зачем это нужно? Именно по этому идентификатору скрипт и будет отличать отправленную форму от других. И при этом не возникнет необходимости делать несколько включений одного и того же JavaScript кода. Но тут опять же все индивидуально и вы можете переделать код как вам удобно.

В форме используем атрибут type в зависимости от типа поля. Это даст дополнительное преимущество при проверке вводимых данных. Чаще всего приходится использовать такие поля как:

Подборка бесплатных IT-курсов и вебинаров от Skillbox.

Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь

Так же на данный момент для полей существуют различные атрибуты, которые избавят от лишних проверок на JavaScript. В этом примере используется атрибут required устанавливающий поле обязательным. А вот например в атрибуте pattern можно указать регулярное выражение для проверки маски ввода. Но я все же для этих целей использую соответствующий плагин jQuery.

Отправка формы без перезагрузки страницы

Тут самое интересное. Но как всегда на самом деле все просто. Приведенный ниже код можно подключить в отдельном .js скрипте или прямо в теле страницы перед закрывающим тегом

И не забудьте перед кодом подключить библиотеку jQuery!

$(document).ready(function () < $("form").submit(function () < // Получение ID формы var formID = $(this).attr('id'); // Добавление решётки к имени ID var formNm = $('#' + formID); $.ajax(< type: "POST", url: '/send.php', data: formNm.serialize(), beforeSend: function () < // Вывод текста в процессе отправки $(formNm).html('
Отправка.
 '); >, success: function (data) < // Вывод текста результата отправки $(formNm).html('
'+data+'
'); >, error: function (jqXHR, text, error) < // Вывод текста ошибки отправки $(formNm).html(error); >>); return false; >); >);

Скрипт отслеживает событие submit и получает id той формы, которая была отправлена. Далее по имеющемуся id он обращается к данным этой формы. В данном примере скрипт отслеживает все элементы с тегом .

Хотите купить новый телефон? Здесь вы можете купить айфон краснодар с высоким качеством и по низкой цене.

После получения данных, скрипт передает их PHP обработчику send.php, который находится в корне сайта. Во время отправки данных в теге выводятся сообщения из функций beforeSend — перед отправкой, success — в случае успеха и error в случае ошибки. Сами поля формы и кнопка отправки при этом стираются.

PHP обработчик

 $mailTo = "mail@mail.ru"; // Ваш e-mail $subject = "Письмо с сайта"; // Тема сообщения $headers= "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=utf-8\r\n"; $headers . ; if(mail($mailTo, $subject, $message, $headers)) < echo "Спасибо, ".$_POST['name'].", мы свяжемся с вами в самое ближайшее время!"; >else < echo "Сообщение не отправлено!"; >> ?>

В самом начале проверяем, что запрос пришел из Ajax и что поле имя не пусто. Далее получаем данные переданные Ajax имя, телефон и сообщение если есть. Устанавливаем заголовки и отправляем с помощью PHP-функции mail() .

$mailTo — ваш e-mail, куда будут приходить сообщения с сайта
$subject — тема сообщения
$headers . mailto:info@site.ru»> info@site.ru \r\n»; — здесь указываем почту с доменом вашего сайта. Почта не обязательно должна существовать (хотя некоторые почтовые сервисы требуют и этого), но обязательно должна быть на домене сайта, с которого отправляется письмо, иначе оно будет попадать в СПАМ.

Заключение

Как вы могли убедиться использовать технологию AJAX с библиотекой jQuery и отправлять письма без перезагрузки страницы вообще проще простого. Надеюсь этот пример формы на PHP и AJAX или отдельные его части пригодятся вам для разработки различных решений для сайта.

Подборка бесплатных IT-курсов и вебинаров от Skillbox.

Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:

Источник