Каким создать свой собственный Ajax Контактная форма

Ajax (Asynchronous JavaScript и XML), стала очень популярным инструментом в веб-дизайне. Данное руководство научит Вас, как сделать AJAX форма контакта с помощью PHP и Jquery. Смотрите код в действии здесь.

Шаг 1 - HTML

Для начала вещей OFF Позволяет создать новый файл и назовите его contact.html, внутри нее Мы хотим, чтобы создать простую HTML-форму, например так:

  <div class="loader"> </ div> 
  <div class="bar"> </ div> 
  <div id="container"> 
    <form id="contactForm" method="" action="mail.php"> 
    <p> 
      <label for="name"> Имя </ Label> 
      <input id="name" name="Name" /> 
    </ P> 
    <p> 
      <label for="email"> E-Mail </ Label> 
      <input id="email" name="email" /> 
    </ P> 
    <p> 
      <label for="message"> Ваше сообщение </ Label> 
      <textarea id="message" name="message" rows="4" cols="30"> </ TEXTAREA> 
    </ P> 
    <p> 
      <input class="submit" type="submit" value="submit"/> 
    </ P> 
    </ FORM> 
  </ div> 

Теперь у нас есть стандартная форма контакта, которое будет представлять Mail.php

Шаг 2 - PHP

Теперь мы хотим создать файл с именем PHP Mail.php это будет обрабатывать результаты нашей формой.

 <PHP / / объявляем нашу переменным $ Name = $ _GET [ 'имя']; $ Email = $ _GET [ 'Email']; $ Comment = $ _GET [ 'комментарии'] / / получить сегодняшнюю дату $ todayis = дата ( "L, М J, Y, G: ИА"); / / Установить заголовок сообщения $ Subject = "Сообщение"; $ сообщении = "Сообщение: $ комментарий \ R \ п от: $ Name \ R \ N Ответ на: $ Email "; / / поместить здесь ваш электронный адрес почты (" email@address.com ", $ при условии, $ Message);?> <! - Дисплей Thankyou сообщения в обратном -> <h1 > <span> Спасибо <h10> <? PHP Эхо $ имя?> </ h10> </ SPAN> </ h1> <p> <span> Ваше сообщение будет ответ как можно скорее. </ SPAN> < / P> <h3> Сообщение, отправленное на: </ h3> <p> <span> <? PHP Эхо $ todayis?> </ SPAN> </ P> 

На этой странице мы создаем несколько переменных, которые собирают имя, адрес электронной почты и сообщений из формы, затем с помощью PHP Mail () функция будет отправить на указанный адрес электронной почты. ради этого урока я использовал email@example.com, но вы можете использовать как угодно.

После того как все это выполняется мы будем показывать, благодарю вас сообщение. использовать некоторые из информации, которую мы собрали.

Шаг 3 - JQuery

Теперь самое умное части. Для начала нам нужно будет включить JQuery рамки. Вы можете загрузить их с JQuery сайта, а затем приложите ее следующим образом.

  <script type="text/javascript" src="yourDirectory/jquery.js"> 

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

  / / заниматься на странице нагрузка 
  $ (функция () ( 
    / / Trigger представить на AJAX 
    $ ( '# ContactForm'). представить (функция () ( 

      / / Скрыть форму 
      $ ( '# ContactForm'). скрывать (); 

      / / показывает загрузку бара 
      $ ( '. погрузчика'). добавить ($('. Бар ')); 
      $ ( '. Bar'). CSS ((Дисплей: 'Блок')); 

      / / передать просьбу AJAX 
      $. получить ( 'Mail.php', (имя :$('# имя '). VAL (), 
                       Email :$('# электронная почта "). VAL (), 
                       комментарии :$('# сообщение "). VAL ()), 

      / / возвращает данные 
      Функция (данных) ( 
        / / показывать графические 
        $ ( '. Bar'). CSS ((Дисплей: 'Нет')); 
        $ ( '. погрузчика'). Append (данные); 
      )); 

    / / пребывание на странице 
    Return FALSE; 
    )); 
  )); 

Этот код вызовет случае, когда представляется в форме, которая будет скрывать форму и отображение загрузке. $. Получить () является строка, которая делает AJAX призыв к Mail.php который отправляет форму Подробная информация по методу GET. После "Аякса" был успешным результатом будет отображаться на экране. Это вводит содержания Mail.php к contact.html странице.

Шаг 4 - CSS

Последний шаг заключается в добавить CSS Styling к форме, чтобы убедиться, можно показывать и скрывать что правильно. Ее не neccesity, но это делает его взгляд чище.

  BODY ( 
    font-family: Helvetica; 
  ) 

  . погрузчика ( 

  ) 

  . Bar ( 
    Дисплей: нет; 
    Справочная информация: URL ( 'AJAX-loader.gif') Нет, повторяю; 
    MARGIN-налево: 20px; 
    разницы-топ: 50px; 
    Высота: 20px; 
    ширина: 230px; 
  ) 

  # (ContactForm 
    Float: слева; 
    Должность: относительное; 
    BACKGROUND-COLOR: # fdfdfd; 
    Высота: 200px; 
  ) 

  # (контейнера 
    PADDING: 20px; 
    Float: слева; 
    Должность: относительное; 
    Высота: 200px; 
    ширина: 100px; 
  ) 

Шаг 5 - Put It Together

Если вы поставите весь код вместе ваши contact.html должна выглядеть следующим образом.

 <html> <head> <script type="text/javascript" src="../jquery.js"> </ script> <script type="text/javascript"> / / заниматься на странице нагрузка $ (функция () (/ / Trigger AJAX представить на $ ( '# ContactForm'). представить (функция () (/ / скрыть форму $ ( '# ContactForm'). скрывать (); / / показывает загрузку Bar $ ( '. Погрузчик '). добавить ($('. Бар')); $ ( '. Bar'). CSS ((Дисплей: 'Блок')); / / отправить AJAX запроса $. получить ( 'Mail.php', (имя :$('# имя '). VAL (), электронная почта :$('#'). VAL (), комментарий :$('# сообщение "). VAL ()), / / возвращает данные функции (данные) (/ / показывать графические $ ( '. Bar'). CSS ((Дисплей: 'Нет')); $ ( '. погрузчика'). Append (данные);)); / / пребывание на странице Return FALSE;)))); </ script> <style type="text/css"> BODY (font-family: Helvetica;). погрузчика (). Bar (Дисплей: нет; справочная информация: URL ( 'AJAX - loader.gif ") не по-Repeat; разницы левый: 20px; разницы-top: 50px; Высота: 20px; ширина: 230px;) # (ContactForm Float: слева; Должность: относительное; фон-COLOR: # fdfdfd высота: 200px;) # (контейнера обивка: 20px; Float: слева; Должность: относительная высота: 200px Ширина: 100px;) </ STYLE> </ head> <div <body> class="loader"> </ div> <div class="bar"> </ div> <div id="container"> <form id="contactForm" method="" action="mail.php"> <p> <label for="name"> Имя </ Label> <input id="name" name="Name" /> </ P> <label for="email"> E-Mail </ Label> <ввод ID = "Имя Email" = "Электронная почта" /> </ P> <label for="message"> Ваше сообщение </ Label> <textarea id="message" name="message" rows="4" cols="30"> < / TEXTAREA> </ P> <input class="submit" type="submit" value="submit"/> </ P> </ FORM> </ div> </ body> </ html> 

Итак, используя только 2 файлы, которые мы создали свой собственный мощный форме Бронирование процедур SPA Ajax. Его просто. Скачать кода и попробуйте сами.