+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Отправка формы с помощью Ajax

Рассмотрим пример отправки формы с помощью ajax. Что нам это даст?
Применяя технологию ajax мы сможем отправить введенные данные без перезагрузки страницы. Тем самым мы сэкономим время и нервы пользователя.

Для начала html код формы. Не забываем подкючать jQuery
<script type="text/javascript" src="http://www.net-f.ru/jss/jquery.min.js"></script>
<div class="divError" id="error"></div>
<form action="javascript:void(0);" name="myform" id="myform">
Ваше имя:<br>
<input type="text" name="name" value="" class="vvod"><br><br>

Ваше email:<br>
<input type="email" name="email" value="" class="vvod"><br><br>

Ваше сообщение:<br>
<textarea class="vvod_textarea" name="mess"></textarea><br><br>
<input type="submit" value="Отправить" id="submit" onclick="sendform();">
</form>
В теге div с идентификатором "error" мы будем выводить сообщение, если пользователь не заполнил какое-то из полей

Далее. Не много javascript кода для сбора и передачи данных в файл php, который и будет обрабатывать нашу форму.
<script language="JavaScript" type="text/javascript">
/* Будьте внимательны. Мы здесь указали адрес нашего сайта
и адрес скрипта, обрабатывающего форму.
Не забудьте изменить их на Ваши.
*/
var Site={serverName:location.hostname} /* адрес сайта */
function sendform(){
var msg=$('#myform').serialize();
/* блокируем кнопку отправить */
document.myform.submit.disabled=true;
/* меняем надпись на кнопке */
document.myform.submit.value="Подождите...";
$.ajax({
type:'POST',
/* адрес php файла, обрабатывающего форму */
url:"http://"+Site.serverName+"/primer/ajaxform/ajax.php",
data:msg+"&action=sendform",
cache:false,
success:function(data){
$("#error").html(data);
document.myform.submit.disabled=false;
document.myform.submit.value="Отправить";
}
});
}
</script>
Далее идет код php, который и будет обрабатывать нашу форму. Он у нас хранится в файле ajax.php

Мы рассмотрим вариант, в котором данные будут просто отправляться на почту. Если Вы планируете записывать данные в базу данных mysql, не забудьте подключиться к серверу mysql и обязательно используйте функцию mysql_real_escape_string()
<?php
if(isset($_POST["action"])):
if($_POST["action"]=="sendform"):
$e1=null;
$name=trim($_POST["name"]);
$name=strip_tags($name);
if(mb_strlen($name,"utf-8")<=0):
$e1.="1";
# это сообщение будет выведено в блоке div с id="error"
print "<li>Заполните поле 'Ваше имя'</li>";
endif;

$email=trim($_POST["email"]);
$email=strip_tags($email);
if(!filter_var($email,FILTER_VALIDATE_EMAIL)):
$e1.="1";
# это сообщение будет выведено в блоке div с id="error"
print "<li>Неверно заполнено поле 'Ваш email'</li>";
endif;

$mess=trim($_POST["mess"]);
$mess=strip_tags($mess);
if(mb_strlen($mess,"utf-8")<=0):
$e1.="1";
# это сообщение будет выведено в блоке div с id="error"
print "<li>Заполните поле 'Ваше сообщение'</li>";
endif;

if($e1==null):
// здесь мы делаем с данными, то что нам нужно
// записываем в базу или файл
// или отправляем их на почту
$mail="info@net-f.ru"; // e-mail куда уйдет письмо
$title="Отправка формы с помощью Ajax"; // заголовок(тема) письма
//конвертируем
$title=iconv("utf-8","windows-1251",$title);
$title=convert_cyr_string($title, "w", "k");

$message="<html><head></head><body><b>Имя:</b> $name<br>";
$message.="<b>Сообщение:</b> $mess<br>";
// ссылка на e-mail
$message.="<b>E-Mail:</b> <a href='mailto:$email'>$email</a>";
$message.="</body></html>";
//конвертируем
$message=iconv("utf-8","windows-1251",$message);
$message=convert_cyr_string($message, "w", "k");

$headers="MIME-Version: 1.0\r\n";
$headers.="Content-Type: text/html; charset=koi8-r\r\n";
$headers.="From: $email\r\n"; // откуда письмо
mail($mail, $title, $message, $headers); // отправляем
/*
далее с помощью javascript мы выводим простое alert
уведомление
*/
?>
<script language="JavaScript" type="text/javascript">
$('#myform').trigger('reset'); /* очищаем форму */
/* выводим уведомление об успехе
можно использовать метод красивее простого alert
*/
alert("Ваше сообщение отправлено! Спасибо!");
</script>
<?php
endif;
else:
die;
endif;
else:
die;
endif;
?>

Демонстрация


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 11386