Уроки по PHP
JavaScript
Уроки по HTML
Дизайнерам
СЕОшникам
РазноеДизайн студия OX2.ru
Эта статья является продолжением темы работы с Ajax с помощью JQuery. Если вы не читали предыдущие статьи, то обязательно прочтите!
Очень часто при создании сайтов требуется динамически отправлять данные на сервер, без перезагрузки страницы. Говорят, что наши предки для этого использовали невидимые фреймы, и в них отправляли данные. Но точно ни кто не знает, к сожалению, об этом сохранилось очень мало информации… Мы пойдем другим путем, и воспользуемся технологией Ajax. Кстати, динамические формы отправки данных на сервер очень сильно увеличивают стоимость создания сайта.
Для отправки формы без перезагрузки страницы мы будем использовать фреймворк JQuery. Чтобы было понятно, можете посмотреть как это работает на готовом примере, в верхнем правом углу сайта.
Создадим 2 файла, первый будет сама форма – index.html, второй form.php – обработчик формы.
Файл index.html (не забудьте скачать и подключить библиотеку JQuery):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax - Отправка формы при помощи JQuery | Дизайн студия OX2</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/**
* Функция для отправки формы средствами Ajax
* @author Дизайн студия ox2.ru
**/
function AjaxFormRequest(result_id,form_id,url) {
jQuery.ajax({
url: url, //Адрес подгружаемой страницы
type: "POST", //Тип запроса
dataType: "html", //Тип данных
data: jQuery("#"+form_id).serialize(),
success: function(response) { //Если все нормально
document.getElementById(result_id).innerHTML = response;
},
error: function(response) { //Если ошибка
document.getElementById(result_id).innerHTML = "Ошибка при отправке формы";
}
});
}
</script>
</head>
<body>
<div style="border: 1px solid red; width: 220px; height: 80px; padding: 10px;" id="result_div_id">
Тут будет вывод нашей формы<br/>
<br/>
<em>Дизайн студия OX2.ru</em>
</div>
<br/><br/>
<form method="post" action="" id="form_id">
Имя: <input type="text" name="name" value="Антон" /><br/>
Телефон: <input type="text" name="phone" value="8(916)124-234-122" /><br/>
Сайт: <input type="text" name="site" value="http://ox2.ru/" /><br/>
<input type="button" value="Отправить" onclick="AjaxFormRequest('result_div_id', 'form_id', 'form.php')" />
</form>
</body>
</html>
Файл form.php:
<?php
/**
* Обработчик формы
* @author Дизайн студия ox2.ru
*/
//Если форма была отправленна, то выводим ее содержимое на экран
if (isset($_POST["name"])) {
//Данные отправляются в кодировке utf-8, поэтому конвертим в cp1251
echo "Ваше имя: " . iconv("utf-8", "cp1251", $_POST["name"]) . "<br/>";
echo "Ваш телефон: " . $_POST["phone"] . "<br/>";
echo "Ваш сайт: " . $_POST["site"] . "<br/>";
}
?>
Комментарии (Написать комментарий)
Комментарий:
\r\n";
Elly [01.03.2015]Советую изменить немного код:
Это в js:
$("#button").click(function(){ AjaxFormRequest('messegeResult', 'formMain', 'form.php'); return false; });
Из формы убрать:
onclick="AjaxFormRequest('result_div_id', 'form_id', 'form.php')"
в input type="button" добавить id="button"
Будет:
Что бы на почту ушло в файле php:
if($_POST) {
$to = "your@mail.com"; // почта, на которую будет приходить письмо
$from = $_POST['name'];
$phone = $_POST['phone'];
$site = $_POST['site'];
$headers = "Reply-To: noreply@mail.com\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=UTF-8 \r\n";
$headers .= "From: ". $from ."
$subject = "Проверка почты";
$msg = "";
$msg .= "
Cообщение с сайта:
\r\n";$msg .= "
Имя: ".$from."
\r\n";$msg .= "
Телефон: ".$phone."
\r\n";$msg .= "
Сайт: ".$site."
\r\n";$msg .= "";
$result = mail($to, $subject, $msg, $headers);
if ($result){ echo "
Cообщение успешно отправленно.
"; }}
?>
Удачи! :)
Комментарий:
reader [20.02.2015]Можно вместо обработчика onclick() к кнопке (вообще убрать его) поместить в тег после определения функции AjaxFormRequest() :
$(document).ready(function(){
$('input[type=button]').click(function(e){
AjaxFormRequest('result_div_id', 'form_id', 'form-handler.php');
e.preventDefault(); /*Отменяет действие по дефолту при клике на элемент - в данном случае, это отправка формы с последующей загрузкой новой страницы по адресу обработчика формы.*/
});
});
Комментарий:
Сергей [07.02.2015]а куда пойдет сообщение, переменной mailto нет
Комментарий:
Добрый день! Пытался подогнать ваше решение под свой сайт и столкнулся с проблемой... После нажатия кнопки "отправить", у меня появляется надпись без перезагрузки страницы, а затем сразу же страница перезагружается... Подскажите пожалуйста
Заполните все поля
Написать комментарий