Реализация 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 ('Что-то пошло не так, повторите попытку еще раз!');";}
?>

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

@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