За последние 24 часа нас посетил 16521 программист и 1591 робот. Сейчас ищут 1136 программистов ...

fetch formData = отправка данных из формы в базу данных

Тема в разделе "PHP для новичков", создана пользователем dedyukhinnp, 30 окт 2024.

Метки:
  1. dedyukhinnp

    dedyukhinnp Новичок

    С нами с:
    18 окт 2024
    Сообщения:
    10
    Симпатии:
    1
    Здравствуйте, уважаемые!

    Подскажите, пожалуйста, как настроить отправку из формы, чтобы запись ложилась в таблицу в базе данных?

    Сама форма здесь:
    Код (Text):
    1. <!DOCTYPE html>
    2. <html lang="ru">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Отправка форм</title>
    7.     <link rel="stylesheet" href="style_otpravka_form.css">
    8. </head>
    9. <body>
    10.         <section class="subscribe">
    11.             <div class="container">
    12.                 <div class="subscribe-wrapper">
    13.                     <div class="subscribe-row row">
    14.                         <div class="section-title">
    15.                             <h2>Подписаться на рассылку</h2>
    16.                         </div>
    17.                     </div>
    18.                     <div class="subscribe-row row">
    19.                         <div class="col-lg-8">
    20.                             <form class="subscribe-form" name="subscribe-form" method="POST">
    21.                                 <label>
    22.                                     <input type="email" name="subscribe-email" placeholder="Введите ваш почтовый ящик" maxlength="40" required>
    23.                                 </label>
    24.                                 <div class="subscribe-button-wrapper">
    25.                                     <button class="subscribe-button colored-btn" type="submit">Подписаться</button>
    26.                                 </div>
    27.                             </form>
    28.                             <p class="subscribe-description">
    29.                                 Один раз в месяц мы делимся с подписчиками самой актуальной и полезной информацией. Просто оставьте свой адрес электронной почты и убедитесь сами!
    30.                             </p>
    31.                         </div>
    32.                     </div>
    33.                 </div>
    34.             </div>  
    35.         </section>
    36.  
    37.     </main>
    38.  
    39.     <script src="scripts_otpravka_form.js"></script>
    40. </body>
    41. </html>
    К ней подключены таблица стилей и скрипт отправки из формы.

    Но при попытке отправить данные выводится сообщение "Что-то пошло не так" вместо "Спасибо за подписку".

    Есть код внутри скрипта (код не мой, это из учебника, по идее должен быть правильный).
    В этом коде в самом конце мы вызываем функцию forms.
    Для неё необходимо ввести 2 параметра:
    *название класса для формы
    *url (адрес сервера, на который будем выполнять отправку данных)

    С конструкцией fetch я вроде бы разобрался как она работает.
    Принимает сначала параметр url, который мы ввели.
    Затем дополнительно мы говорим какой метод будет использоваться для запроса (в нашем случае - это отправка).
    И дополнительно говорим что будет в теле запроса (в этом коде в теле запроса будет коллекция с данными FormData с введенными из формы данными).

    Предположим у меня есть таблица users.
    В ней столбики:
    *id
    *e-mail

    Какой мне url надо указать для fetch?
    И что там за файл должен быть по этому адресу, который я укажу?

    Я примерно понимаю, что там должен быть .php файл.
    В котором указаны данные для подключения к базе.
    Который принимает POST-запрос от сервера.
    И который в свою очередь подключается к базе.
    И выполняет SQL-запрос наподобие "insert into users ..."

    Типа такого:
    Код (Text):
    1. <?php
    2.     // Параметры для доступа к БД
    3.     $host = 'localhost';
    4.     $dbuser = 'user';
    5.     $dbpass = 'pass123';
    6.     $db = 'baza';
    7.  
    8.     @$mysqli = new mysqli($host, $dbuser, $dbpass, $db);
    9.  
    10.     if ($mysqli->connect_errno) {
    11.         echo "SQL errno: " . $mysqli->connect_errno . "<br>\n";
    12.         echo "Error: " . $mysqli->connect_error . "\n";
    13.         die();
    14.     }
    15.  
    16.     $mysqli->set_charset("utf8");
    17.  
    18.     $email = filter_input(INPUT_POST, 'subscribe-email', FILTER_SANITIZE_MAGIC_QUOTES);
    19.  
    20.     $sql = "insert into users values('test', \"$email\", 'test2', 'test3')";
    21.     $result = $mysqli->query($sql) or die($mysqli->error);
    22.  
    23. ?>
    Правильно понимаю?

    Или что-то другое необходимо в url вводить?

    Ниже код основного скрипта, с которым проблема:
    Код (Text):
    1. "use strict";
    2.  
    3. window.addEventListener("DOMContentLoaded", () => {
    4.  
    5.     // Forms
    6.  
    7.     const forms = (formSelector, url) => {//создаём главную функцию forms, которая обрабатывает формы обратной связи. у неё есть два параметра - название класса, который выбираем и url-адрес куда будем отправлять сетевой запрос с помощью fetch
    8.         const forms = document.querySelectorAll(formSelector); //выбираем элемент (с классом ".subscribe-form")
    9.  
    10.         const message = { //создаём массив с сообщениями (3 вида сообщений)
    11.             loading: "spinner.svg", //в качестве сообщения о загрузке будет выводиться картинка спиннера
    12.             success: formSelector === ".subscribe-form" ? "Благодарим за подписку на рассылку"
    13.                     : "Спасибо! Мы вам перезвоним", //так будет выглядеть сообщение об успешной подписке
    14.             failed: "Что-то пошло не так, повторите еще раз" //сообщение об ошибке будет таким
    15.         };
    16.  
    17.         const postData = async (data) => { //создали функцию postData, которая будет запускать асинхронную передачу
    18.             let result = await fetch(url, { //дожидаемся выполнения асинхронной операции. операция fetch (сетевой запрос на сервер). адрес, по которому нужно сделать запрос = url
    19.                 method: "POST", //говорим что мы внутри fetch данные будем не получать, а отправлять
    20.                 body: data, //тело запроса = data
    21.             });
    22.      
    23.             return await result.text(); //возвращает содержимое ответа в виде строки текста и сохраняется в переменную result
    24.         };
    25.  
    26.         function bindPostData(form) { //создаем функцию связывание данных
    27.             form.addEventListener("submit", (evt) => { //включаем прослушивание события (нажатие на кнопку)
    28.                 evt.preventDefault(); //если событие наступило выполняется это
    29.  
    30.                 const statusMessage = document.createElement("img"); //создается элемент (картинка)
    31.                 statusMessage.src = message.loading;//ссылка на картинку - это свойство loading (где мы указывали ссылку на картинку спиннера)
    32.                 statusMessage.style.cssText = `
    33.                     display: block;
    34.                     margin: 0 auto;
    35.                 `;//задали стиль для картинки
    36.                 form.insertAdjacentElement("afterend", statusMessage);//вставили новый элемент (картинку спиннера) в форму. место вставки - в конец (afterend). элемент, который вставляем - картинка спиннера
    37.  
    38.                 const formData = new FormData(form);//создаём новый объект FormData (коллекцию), который позволяет передавать данные
    39.  
    40.                 postData(formData) //запускаем функцию асинхронной передачи коллекции с данными
    41.                 .then(() => { //реагируем на состояние промиса fullfilled. в случае успешного выполнения асинхронной операции выполняем
    42.                     showThanksModal(message.success, form);//показываем модальное окно с сообщением "Благодарим за подписку на рассылку"
    43.                     statusMessage.remove(); //удаляем картинку спиннера
    44.                 })
    45.                 .catch(() => { //реагируем на состояние промиса rejected. в случае ошибки выполняем
    46.                     showThanksModal(message.failed, form);//показываем окно с сообщением "Что-то пошло не так, повторите еще раз"
    47.                     statusMessage.remove();//удаляем картинку спиннера
    48.                 })
    49.                 .finally(() => {//что мы делаем когда завершится асинхронная операция (без разницы успешная она была или нет)
    50.                     form.reset();//устанавливаем все значения формы в исходное состояние
    51.                 });
    52.             });
    53.         }
    54.  
    55.         forms.forEach(item => {
    56.             bindPostData(item);
    57.         });
    58.  
    59.         function showThanksModal(message, parent) { //функция показа окна с сообщением
    60.              
    61.             const thanksModal = document.createElement("div"); //создается элемент (блок)
    62.             thanksModal.classList.add("modal"); //добавляем элементу класс .modal
    63.             thanksModal.classList.add("modal-show"); //добавляем элементу класс .modal-show
    64.             thanksModal.innerHTML = `
    65.                 <div class="modal__content">
    66.                     <div class="modal__title">${message}<div>
    67.                 </div>
    68.             `;//внутри созданного блока там еще будет два блока, которые входят друг в друга
    69.             document.body.style.overflow = "hidden"; //содержимое, выходящее за пределы «родительского» блока body, обрезается по его границам без прокрутки
    70.          
    71.             parent.appendChild(thanksModal);//вставляем в конец созданный блок
    72.             setTimeout(() => { //устанавливаем таймер
    73.                 thanksModal.remove();//элемент убираем
    74.                 document.body.style.overflow = "";//возвращаем возможность прокрутки
    75.             }, 4000);//4 секунды время таймера
    76.         }
    77.     };
    78.  
    79.     try {//пробуем
    80.         //forms(".feedback-form", "http://localhost:3000/requests");//запускаем функцию для формы обратной связи
    81.         forms(".subscribe-form", "http://e-trafaret.ru/uchebnik/otpravka_iz_formy.php");//запускаем функцию для формы подписки (на какой то сервер непонятный)
    82.     } catch(err) {
    83.      
    84.     }
    85. });
     
  2. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    425
    Симпатии:
    79
    Адрес:
    Бавария, Германия
     
  3. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    425
    Симпатии:
    79
    Адрес:
    Бавария, Германия
    Добрый день!
    Примерно так
    PHP:
    1. <?php
    2. $email = filter_input(INPUT_POST, 'subscribe-email', FILTER_SANITIZE_MAGIC_QUOTES);
    3. if($email)
    4. {
    5.     // Параметры для доступа к БД
    6.     $host = 'localhost';
    7.     $dbuser = 'user';
    8.     $dbpass = 'pass123';
    9.     $db = 'baza';
    10.     @$mysqli = new mysqli($host, $dbuser, $dbpass, $db);
    11.     if ($mysqli->connect_errno) {
    12.         echo "SQL errno: " . $mysqli->connect_errno . "<br>\n";
    13.         echo "Error: " . $mysqli->connect_error . "\n";
    14.         die();
    15.     }
    16.     $mysqli->set_charset("utf8");
    17.     $email = filter_input(INPUT_POST, 'subscribe-email', FILTER_SANITIZE_MAGIC_QUOTES);
    18.     $sql = "insert into users values('test', \"$email\", 'test2', 'test3')";
    19.     $result = $mysqli->query($sql) or die($mysqli->error);
    20.     echo !$result?0:1;
    21.     exit;
    22. }
    23. ?>
    24. <html>
    25. <head>
    26. <script>
    27. window.addEventListener("load", () => {
    28.     form = document.querySelectorAll("subscribe-for");
    29.     form.onsubmit = (event) => {
    30.     event.preventDefault();
    31.     fd = new FormData(form);
    32.     fetch("?", {
    33.         method: "POST",
    34.         body: fd
    35.       })
    36.     .then((response) => response.text())
    37.       .then((text) => {
    38.         console.log(text);
    39.         //злесь проверяйте результат text 1 или 0
    40.        })
    41.       .catch((error) => {
    42.         console.log(`Error: ${error.message}`);
    43.       });
    44.     }
    45. });
    46. </script>
    47. </head>
    48. <body>
    49. <!------------------------------------>
    50. <form class="subscribe-form" name="subscribe-form" method="POST">
    51. <!------------------------------------>
    52. </form>
    53. <!------------------------------------>
    54. </body>
    55. </html>
    Посмотрите Ваш JS в редакторе с подсветкой синтаксиса - потеряны закрывашки функций
    и определение функций посмотрите здесь https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
    Также у Вас странные коментарии - объекты называются массивами или переменными и не только это.
    Код (Javascript):
    1. const message = { //создаём массив с сообщениями (3 вида сообщений)
    2.             loading: "spinner.svg", //в качестве сообщения о загрузке будет выводиться картинка спиннера
    3.             success: formSelector === ".subscribe-form" ? "Благодарим за подписку на рассылку"
    4.                     : "Спасибо! Мы вам перезвоним", //так будет выглядеть сообщение об успешной подписке
    5.             failed: "Что-то пошло не так, повторите еще раз" //сообщение об ошибке будет таким
    6.         };
    7. ...
    8. return await result.text(); //возвращает содержимое ответа в виде строки текста и
    9. сохраняется в переменную result
    Удачи!
     
    #3 Vladimir Kheifets, 30 окт 2024
    Последнее редактирование: 30 окт 2024
    dedyukhinnp нравится это.
  4. dedyukhinnp

    dedyukhinnp Новичок

    С нами с:
    18 окт 2024
    Сообщения:
    10
    Симпатии:
    1
    Владимир, спасибо!

    Я когда открыл консоль, то оказалось, что ошибка "Что-то пошло не так" была вызвана вообще тем, что url адрес я указал в формате "http://", а не "https://". Когда адрес поправил стало выводиться "Благодарим Вас за подписку".

    Но в базу все равно не получалось занести данные из формы.
    Тогда я решил попробовать максимально всё упростить (в целях научиться) в файле .php:
    Код (Text):
    1. <?php
    2. if(isset($_POST['subscribe-email']))
    3. {
    4.     $host = 'localhost';
    5.     $dbuser = 'user';
    6.     $dbpass = '123';
    7.     $db = 'baza';
    8.  
    9.     @$mysqli = new mysqli($host, $dbuser, $dbpass, $db);
    10.  
    11.     if ($mysqli->connect_errno) {
    12.         echo "SQL errno: " . $mysqli->connect_errno . "<br>\n";
    13.         echo "Error: " . $mysqli->connect_error . "\n";
    14.         die();
    15.     }
    16.  
    17.     $sql = "INSERT INTO users (imya, telefon, pochta, parol) VALUES ('ura!', 'prishlo!', 'pozdravlyayu!', 'ura!')";
    18.  
    19.     $result = $mysqli->query($sql) or die($mysqli->error);
    20. }
    21. ?>
    И после попытки отправить данные из формы, в базу действительно занеслись значения (тестовые) из SQL-запроса.

    Это работает! Спасибо!

     
  5. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.790
    Симпатии:
    1.330
    Адрес:
    Лень
    Что один написал уязвимость, что второй повторил за ним. Для проверки мыла есть спец константа. 2, 10, 17, 18, 20 строки топ
     
    dedyukhinnp нравится это.