Реализация AJAX запроса

@sw0rl0k · Регистрация: 20.12.2013

Студворк — интернет-сервис помощи студентам

Добрый день!

Есть файл, предположим, recall.html с такой вот формой:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form method="post" action="mail.php">
 
<label>Имя:</label>
<input name="name">
 
<label>Телефон:</label>
<input name="phone">
 
<label>Комментарий:</label>
<textarea name="message"></textarea>
 
<input id="submit" name="submit" type="submit" value="Отправить">
 
</form>

И, соответственно, файл mail.php в той же директории со следующим кодом:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
$name = $_POST['name'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$from = 'From: Recall';
$to = 'mail@mail.ru'; 
$subject = 'Обратный звонок';
 
$body = "Имя: $name\nТелефон: $phone\nКомментарий:\n$message";
 
if ($_POST['submit']) {
  if (mail ($to, $subject, $body, $from)) { 
    echo '<p>Ваша заявка принята! Ожидайте звонка!</p>';
  } else { 
    echo '<p>Что-то пошло не так, повторите попытку еще раз!</p>'; 
  }
}
?>

Каждый раз, нажимая кнопку Отправить пользователь попадает на страницу mail.php. Хотелось бы узнать, как с помощью AJAX сделать такую форму без перезагрузки. Что бы вместо новой страницы просто выводились алерты "Ваша заявка принята! Ожидайте звонка!" в случае успешной отправки, и "Что-то пошло не так, повторите попытку еще раз!" в случае ошибки. В JS не силен от слова вообще. Попробовал почитать, с наскока мне AJAX не поддался. Буду благодарен за помощь.

@Azdeman · 20.09.2016, 23:54

Сообщение от sw0rl0k

action="mail.php"

1.) убрать action.
2.) отследить нажатие кнопки
потом отправить Ajax запрос на сервер (mail.php)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
$("#submit").click(function(){
  $.ajax({
           type:"POST", //метод передачи
           action: "mail.php", //путь к файлу
           data:{}, //передача переменных на сервер, если такое имеются 
           success:function(data){ 
              alert(data); // ответ от сервера 
} 
});
 });
});

@kalabuni · 21.09.2016, 04:16

для реализации AJAX-запроса:
1. форма (теги <form> и </form>) не нужна -- замените её контейнером <div></div>
2. имена name текстовым полям не нужны -- пропишите им идентификаторы id
3. кнопка сабмита не нужна -- замените её кнопкой type="button"

итого ваш файл recall.html будет иметь следующий HTML+JS-код

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div>
     Имя: <input id="name">
     Телефон: <input id="phone">
     Комментарий: <textarea id="message"></textarea>
    <input type="button" value="Отправить">
</div>
<script>
document.querySelector ('input [type="button"].onclick = function ()
    {
    var hxr = new XMLHttpRequest();
    hxr.open ('post', 'mail.php', true);
    hxr.onreadystatechange = function ()
        {
        if (hxr.readyState < 4) return;
        var s = document.createElement ('script');
        s.text= hxr.responseText;
        document.body.appendChild (s);
        }
    var nameVal = document.getElementById ('name').value;
    var phoneVal = document.getElementById ('phone').value;
    var messageVal = document.getElementById ('message').value;
    hxr.send ('name=' + nameVal  + '&phone=; + phoneVal + '&message=' + messageVal);
    }
</script>

код файла mail.php вам надо будет частично изменить, а именно:
перед выводом необходимо прописать заголовок header ("Content-type: text/plain; charset=utf-8");
и сам вывод переписать на следующее:

PHP
1
2
        {echo "alert ('Ваша заявка принята! Ожидайте звонка!');";}
   else {echo "alert ('Что-то пошло не так, повторите попытку еще раз!');";}

@sw0rl0k · 21.09.2016, 12:17 **[ТС]**

kalabuni, нашел в Вашем коде пару опечаток, вот вроде устранил все, а всё равно ничего не происходит при нажатии на кнопку. Консоль больше ни на что не ругается, а всё равно не работает.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.querySelector('input[type="button"]').onclick = function ()
                              {
                              var hxr = new XMLHttpRequest ();
      hxr.open ('post', 'mail.php', true);
      hxr.onreadystatechange = function ()
      {
        if (hxr.readyState < 4) return;
        var s = document.createElement ('script');
        s.text= hxr.responseText;
        document.body.appendChild (s);
      }
      var nameVal = document.getElementById ('name').value;
      var phoneVal = document.getElementById ('phone').value;
      var messageVal = document.getElementById ('message').value;
      hxr.send ('&name=' + nameVal + '&phone=' + phoneVal + '&message=' + messageVal);
                }

@kalabuni · 21.09.2016, 13:12

Сообщение от sw0rl0k

нашел в Вашем коде пару опечаток

есть такое, извините, -- пропустил закрывающую скобку в методе querySelector () в строке #8 моего кода
всё остальное вроде бы в порядке -- где вы нашли вторую опечатку?

для проверки работоспособности временно уберите оба условных оператора из файла mail.php, т.е. сделайте безусловный вывод заголовка и одного echo (например, первого из ваших двух) и проверьте -- появится ли окошко с текстом, сообщающим, что "всё хорошо, прекрасная маркиза"
если алерт "выскочит", то это будет означать, что со стороны javascript'a всё ок

Добавлено через 20 минут
упс!
нашёл ошибку: в javascript-коде использую объект document.body, а в HTML-коде теги <body> и </body> не прописал

добавьте к моему коду самой первой строкой открывающий тег <body>, а закрывающий </body> поместите между </div> и <script>
и затем проверьте работоспособность javascript-кода по вышеописанной "методе"

@sw0rl0k · 21.09.2016, 13:37 **[ТС]**

Сообщение от kalabuni

где вы нашли вторую опечатку?

В строке #22 Вашего кода '&phone=' точка с запятой вместо кавычки =)

В общем, проблема была в первом условии if ($_POST['submit']). Убрал его и всё заработало.

НО! В письме не приходят данные из формы. То есть приходит тупо:
"Имя:
Телефон:
Комментарий:"
а данные из форм нет.

На данный момент код выглядит так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="form">
 
      <label>Имя:</label>
      <input id="name">
 
      <label>Телефон:</label>
      <input id="phone">
 
      <label>Комментарий:</label>
      <textarea id="message"></textarea>
 
      <input id="submit" type="button" value="Отправить">
 
    </div>
    <script>
      document.querySelector('input[type="button"]').onclick = function ()
      {
        var hxr = new XMLHttpRequest ();
        hxr.open ('post', 'mail.php', true);
        hxr.onreadystatechange = function ()
        {
          if (hxr.readyState < 4) return;
          var s = document.createElement ('script');
          s.text= hxr.responseText;
          document.body.appendChild (s);
        }
        var nameVal = document.getElementById ('name').value;
        var phoneVal = document.getElementById ('phone').value;
        var messageVal = document.getElementById ('message').value;
        hxr.send ('name' + nameVal + '&phone' + phoneVal + '&message' + messageVal);
      }
    </script>

и пхп

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
$name = $_POST['name'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$from = 'From: Recall';
$to = 'mail@mail.ru';
$subject = 'Обратный звонок';
 
$body = "Имя: $name\nТелефон: $phone\nКомментарий:\n$message";
 
header ("Content-type: text/plain; charset=utf-8");
if (mail ($to, $subject, $body, $from)) {
  echo "alert ('Ваша заявка принята! Ожидайте звонка!');";}
else {
  echo "alert ('Что-то пошло не так, повторите попытку еще раз!');";}
?>

В чем может быть дело?

Добавлено через 3 минуты

Сообщение от kalabuni

нашёл ошибку: в javascript-коде использую объект document.body, а в HTML-коде теги <body> и </body> не прописал

У меня полноценная html страница. Просто для простоты выкладываю только код формы и js

@kalabuni · 21.09.2016, 13:42

блин, в 5 утра делал, и спать вроде не хотел, но глаза слипались

строка #15 моего кода должна быть такой
hxr.send ('name=' + nameVal + '&phone=' + phoneVal + '&message=' + messageVal);

@sw0rl0k · 21.09.2016, 21:16 **[ТС]**

kalabuni, Спасибо большое! Все работает =)

Добавлено через 4 часа 50 минут
На случай, если кто-то будет искать готовый вариант по такому же поисковому запросу.

Страница с формой:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
...
<body>
...
<div>
      Имя: <input id="name">
      Телефон: <input id="phone">
      Комментарий: <textarea id="message"></textarea>
      <input type="button" value="Отправить">
    </div>
...
</body>
<script>
    document.querySelector('input[type="button"]').onclick = function ()
    {
      var hxr = new XMLHttpRequest ();
      hxr.open ('post', 'mail.php', true);
      hxr.onreadystatechange = function ()
      {
        if (hxr.readyState < 4) return;
        var s = document.createElement ('script');
        s.text= hxr.responseText;
        document.body.appendChild (s);
      }
      var nameVal = document.getElementById ('name').value;
      var phoneVal = document.getElementById ('phone').value;
      var messageVal = document.getElementById ('message').value;
      hxr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      hxr.send ('name=' + nameVal + '&phone=' + phoneVal + '&message=' + messageVal);
    }
</script>
</html>

Страница mail.php (находится в той же директории, что и страница с формой):

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$name = $_POST['name'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$from = 'From: От кого';
$to = 'тут ваш маил'; 
$subject = 'Обратный звонок';
 
$body = "Имя: $name\nТелефон: $phone\nКомментарий:\n$message";
 
if (mail ($to, $subject, $body, $from)) {
  echo "alert ('Ваша заявка принята! Ожидайте звонка!');";}
else {
  echo "alert ('Что-то пошло не так, повторите попытку еще раз!');";}
?>

Новые блоги и статьи Все статьи Все блоги /
Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	1С: Контроль уникальности заводского номера Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .	Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git
1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	21.09.2016, 13:42
	блин, в 5 утра делал, и спать вроде не хотел, но глаза слипались строка #15 моего кода должна быть такой hxr.send ('name=' + nameVal + '&phone=' + phoneVal + '&message=' + messageVal); 1