Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по AJAX / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Отправка сообщений при помощи AJAX

Здравствуйте, уважаемые читатели. В последнее время в интернете все чаще встречаются сайты, на которых обмен информации происходит без непосредственной перезагрузки страницы. Все это достигается благодаря бурно развивающейся технологии AJAX, тем более при помощи jQuery с ним очень просто работать. В данном уроке мы будем рассматривать, как отправить данные из формы на сервер. Давайте сразу приступим к практике и по ходу будем разбирать что происходит.

База данных

Для начала создаем обычную простенькую форму:

<form action="sendMessage.php" method="post" name="form">
      <p>

      Автор:<br>
      <input
name="author" type="text" id="author">
      </p>
      <p>

       Текст сообщения:<br>
       <textarea
name="message" rows="5" cols="50" id="message"></textarea>
       </p>
       <input
name="js" type="hidden" value="no" id="js">
       <p>
       <input
name="button" type="submit" value="Отправить" id="send"> <span id="resp"></span>
       </p>
</form>

Тут у нас присутствуют поля для ввода имени и текста сообщения, кнопка отправки, скрытое поле которое будет отправляться если у пользователя отключен JavaScript. Не забываем также подключить jQuery:

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

Приступим теперь к написанию самого кода отправки сообщения. Действие у нас будет происходить по клике на кнопку "Отправить".  В общем приведу весь код, а потом будем разбирать по кирпичикам:

<script type="text/javascript">
$(function(){
   $("#send").click(function(){
      var author = $("#author").val();
      var message = $("#message").val();
      $.ajax({
         type: "POST",
         url: "sendMessage.php",
         data: {"author": author, "message": message},
         cache: false,
         success: function(response){
             var messageResp = new Array('Ваше сообщение отправлено','Сообщение не отправлено Ошибка базы данных','Нельзя отправлять пустые сообщения');
             var resultStat = messageResp[Number(response)];
             if(response == 0){
                $("#author").val("");
                $("#message").val("");
             }
             $("#resp").text(resultStat).show().delay(1500).fadeOut(800);
                                                              
                                               }
          });
          return false;
                                                              
    });
});
</script>

Итак при нажатии на кнопку у нас будет осуществляется весь выше приведенный код. Первым делом мы получаем значение полей и заносим их в переменные author и  message соответственно. Затем идет сам ajax запрос, который и будет передавать данные на сервер. Передавать будем методом POST, обработчик будет называться sendMessage.php, в параметре data написаны передаваемые значения, а так же делаем запрет на кеширование. Далее в success идет функция, которая будет выполнятся в случае успешного запроса. В ней мы будем выводить сообщение об удачной или неудачной отправке. Для этого создадим массив messageResp с фразами которые будут выводится. Забегая немного вперед скажу что в обработчике у нас будут выводится цифры, которые будут соответствовать тому или иному сообщению, т.е. 0 - "Ваше сообщение отправлено", 1 - "Сообщение не отправлено. Ошибка базы данных" и т.д. Затем в переменную resultStat мы уже в соответствии с полученной цифрой из обработчика будем заносить сообщение, которое потом и будем выводить на экран в тег span с id=resp. Далее смотрим, если сообщение отправилось успешно, то очищаем форму. Строка return false; является обязательной, поскольку она отменяет обычное действие кнопки submit.
Здесь вроде как все, теперь будем разбирать сам обработчик.
Так как мы делаем, так что бы наша форма работала и при отключенном JavaScript, то у нас будет два практически идентичных куска кода. Вот здесь нам и понадобится скрытое поле с именем js: если этой переменной нет, то считаем что JavaScript включен, если переменная есть и ее значение no, то считаем что она передалась обычным способом (JavaScript выключен). Код обработчика приводить не буду, поскольку он довольно прост и состоит из простых проверок на безопасность и занесения данных в базу. Скажу лишь то, что при отправки русского текста средствами ajax может возникнуть проблема с кодировкой, поэтому в этом файле мы указываем явную кодировку windows-1251 и принудительно преобразуем кодировку данных из UTF-8 в windows-1251. И в принципе здесь все о чем я хотел рассказать.

Автор: Евгений Бочкарев Урок добавлен: 25 Мая 2011 в 20:55 Просмотров: 38629

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (85)

#86 Евгений 02-05-2014 в 14:03
Да, это моя невнимательность, нужно не slideIn(800), а fadeIn(800)
#87 нейт 02-05-2014 в 15:27
Евгений, Спасибо все заработало)
#88 BY 28-05-2014 в 14:41
Добрый день!
Подскажите пожалуйста, как можно увидеть отправленной сообщения на другом окне.
Заранее спасибо.
#89 mmm 23-04-2015 в 21:25
у меня не отображаются данные, хранятся только в базе
#90 Юрий 06-08-2015 в 15:29
Дравствуйте отличный урок, применил его в свою систему где два пользователя между собой переписываются. Интересует как можно с помощью ajax получить сообщение от второго пользователя НЕ ПЕРЕЗАГРУЖАЯ страницу?
#91 Иван 22-02-2016 в 15:27
Здравствуйте)Как сделать капчу, такую же как у вас на сайте?
#92 Саня 16-04-2016 в 19:25
в курить не могу почему ответ приходит Сообщение не должно быть пустым..т.е не приходят переменные на обработчик:(
#93 Саня 16-04-2016 в 19:56
проверил пример рабочий .создал папку php и переместил в неё файл sendMessage.php
подправил строки
url: "php/sendMessage.php",

<form action="php/sendMessage.php" method="post" name="form">



и пример стал не рабочий))) что не так то?
#94 Вова 20-07-2016 в 22:52
у меня не получается нажимаю на субмит 0 внимание
#95 hhhh 01-12-2016 в 18:55
dsfdf
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки