Php скрипт без перезагрузки страницы

AJAX — как сделать запрос к PHP-коду без перезагрузки страницы

Эта тема имеет больше общего с JavaScript, но ввиду того, как часто у новичков возникают вопросы вроде «Как выполнить функцию PHP из JavaScript-кода?» или «Как отправить форму без перезагрузки?», она напросилась в этом разделе сама самой.

Итак, AJAX — это Asynchronous Javascript And XML — асинхронный JavaScript и XML, если по-русски. Разберём каждое слово:

1) Асинхронный — это и есть то самое, чего все так хотят — выполнение действий без перезагрузки страницы. Пока JavaScript отправил запрос на сервер, пользователь продолжает выполнять действия на странице, т.к. никаких переходов при отправке запроса не происходит.

2) JavaScript — язык программирования, который используют инструменты для отправки AJAX-запросов. Т.к. статья для новичков, то подразумевается, что вы используете либо только чистый JavaScript, либо в совокупности с jQuery. Если вы не используете jQuery, то для создания такого запроса требуется создание объекта XMLHttpRequest. В jQuery всё немного проще и лаконичнее — вы пользуетесь методами $.post и $.get для отправки соответствующих запросов. Когда нужно использовать post, а когда get — чуть позже.

3) XML — в контексте этой статьи это не так важно, считайте это отсылкой к тому самому объекту XMLHttpRequest, ведь сначала появился именно этот способ.

Таким образом, AJAX — это способ отправки запросов (и данных) на сервер без перезагрузки страницы и, как следует, прерывания действий пользователя.

Обычно, любой запрос сопровождается некоторыми параметрами. В GET-запросах такие параметры передаются в URL, например: http://site.com/index.php?param1=value1&param2=value2 . Это накладывает два ограничения:
1) Объём отправляемых данных существенно ограничен — объём классического GET-запроса находится в диапазоне от 2 до 8 килобайт по умолчанию.
2) Данные открыты — не желательно передавать чувствительные данные, например — пароли. Из-за этого, POST-запросы встречаются намного чаще.

У POST-запроса, в отличие от GET, есть тело, которое помещается после заголовка (а GET-запрос имеет только его). Данные тела явно не передаются (относительно — трафик можно прослушать, но это уже вопрос применения шифрования и защищенного канала). Объём информации, который можно передать в теле, опять же, зависит от настроек сервера. По умолчанию, этот объём порядка 20 мегабайт. И, разумеется, можно передавать GET-параметры через URL. В общем случае, POST-запросы являются более гибкими.

Теперь рассмотрим отправку этих двух видов запросов с помощью обозначенных выше методов — с помощью объекта XMLHttpRequest и методов jQuery — $.post и $.get.

В качестве примера используем следующий «скрипт»:

 $name = $_GET['name']; echo "Hello, $name!";

var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { alert(this.responseText); } else { alert('Произошла ошибка!'); } }; xmlhttp.open("GET", "hello.php?name=Webkill", true); xmlhttp.send(null);

В строке один происходит создание объекта. Во второй мы присваиваем этому объекту свойство onreadystatechange — функцию, которая будет выполнена, когда
будет получен ответ на запрос. Такая функция называется callback (колбэк). В ней мы обрабатываем два случая — когда запрос прошел нормально, и когда произошла ошибка.

В 10-той строке мы вызываем метод, в который передаём три параметра:
1) «GET» — тип запроса
2) «hello.php?name=Webkill» — URL запроса: файл hello.php и один параметр name.
3) true — асинхронность. Если false — то браузер будет ожидать ответа (синхронность).

На 11-ой строке происходит отправка запроса, при этом мы указываем один параметр — null (позже, через этот параметр будут передаваться данные тела POST-запроса).

$.get("hello.php", {name: "Webkill"}, function(data) { alert(data); } );

Собственно, отправка GET-запроса в jQuery заключается в вызове метода $.get с тремя параметрами:
1) «hello.php» — часть URL без GET-параметров
2) — параметры запроса в виде ассоциативного массива (JSON)
3) Функция-обработчик, которая вызывается в случае «успеха»

Допустим, нужно сделать аутентификацию без перезагрузки страницы. GET-запрос не подходит, т.к. передаётся пароль.

 $login = 'Webkill'; $pass = 'qwerty123'; if($_POST['login'] == $login && $_POST['password'] == $pass) { echo 'Добро пожаловать!'; } else { echo 'В доступе отказано.'; }

var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { alert(this.responseText); } else { alert('Произошла ошибка!'); } }; xmlhttp.open("POST", "login.php", true); xmlhttp.send({login: inputLogin, pass: inputPassword});

Легко заметить, что в целом код не изменился. Поменялся только первый параметр функции open — тип запроса, и теперь мы передаём данные в метод send в формате JSON.

$.post('login.php', {login: inputLogin, pass: inputPassword}, function(data) { alert(data); } );

Снова, изменений немного: только название метода говорит о том, что в этот раз мы шлём POST-запрос. В случае GET-запроса параметры, которые мы передаём в JSON, закодируются в URL, а в случае POST — попадут в тело запроса. Если вы хотите использовать GET-параметры в POST-запросе, то необходимо их писать в URL вручную.

Естественно, круг задач, для которых используется AJAX намного шире — загрузка файлов, игры и т.д. Целью этой статьи является ознакомление с этим комплексом технологий. Стоит отметить, что в случае jQuery можно обрабатывать намного больше вариантов ответа сервера с помощью функций done, fail и always. Также, функции-обработчики кроме собственно ответа принимают и другие параметры.

Источник

Как вызвать php скрипт без перезагрузки страницы?

нада не событие submit (не click) отлавливать и preventDefault() добавить.

Так же для дебага можно временно заменить POST на GET

и Проверить получает ли что то сам файл code.php доходят ли до него значения, и работает ли функция отправки mail()

Dmitriy__S, скопируй мой код полностью, тк у тебя он с ошибками и проделай для проверки все то что я тебе написал выше

для дебага javascript можно натыкать везде console.log(‘ok’); и смотреть в консоль браузера что бы понимать доходит ли до туда обработка

не будет такой код работать, если на теге button будет name и value для отправки, тег button не попадает в сериализацию

так же такой код не будет работать, если в форме несколько тегов button с атрибутами — formaction

var form = $(this); $.ajax(< type: "POST", url: '/php/code.php', //возможно тут нужен полный путь к файлу типа http://myweb.ru. data: form.serialize(), // serializes the form's elements. success: function(data) < alert(data); // show response from the php script. >>);

Источник

Отправка формы без перезагрузки страницы на 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-курсы, нужно только пройти онлайн-тест здесь

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

Источник

Как сделать форму на PHP без перезагрузки страницы, не используя AJAX?

Сергей delphinpro, повторяю ответ: не хочу использовать AJAX и jQUERY. Я задал конкретный вопрос и хочу получить на него конкретный ответ, а не дополнительные вопросы: зачем, почему и так далее.

nikitahudkov, Для фоновой отправки запросов есть одна технология — ajax.
Ниже упомянуты веб-сокеты. Но через них не отправляют формы. Сокеты хороши, если вам нужно поддерживать постоянное соединение в сервером. Например, для доставки real-time уведомлений пользователю.
Поэтому я вас и спрашиваю — зачем вам нужно использовать что-то отличное от ajax.

Кроме того вызывает настороженность ваше упоминание jquery рядом с ajax. Возможно у вас нет понимания, что эти вещи совсем не связаны, и аякс можно использовать без этой библиотеки.

И вот, вместо того, чтобы более подробно раскрыть суть вашей проблемы, вы начинаете огрызаться.

nikitahudkov,
конкретный ответ на ваш вопрос не возможен. Вы нагло тратите время других людей в пустую отказываясь разъяснить причину постановки такого вопроса. Формы без перезагрузки страницы отправляются через AJAX. Точка. Именно для этого эта технология и создана и именно эту технологию на сколько я знаю 100% разработчиков используют для этой задачи. Может быть и есть какие то костыли которыми можно достичь желаемый результат, но это будут костыли! По этому абсолютно легетимен уточняющий вопрос о причине такого запроса. Скорее всего AJAX именно то что вам нужно, но вы просто не до конца в этой технологии разбираетесь (судя по вашему профилю) и как кажется и не хотите разбираться, по каким то не объективным причинам.

Источник