Почему FormData не отправляет данные?

Question

[Yarilo-Vitaly]

Здравствуйте. В сотый раз проверяю код и не могу понять. Почему не работает FormData.
При правильной работе в console.log() и Network должен появляться объект с данными из формы.
А его нет. Думаю что по этой же причине не приходят данные в phpMyAdmin. Для работы я использую Open Server. Если перейти по ссылки, то можно увидеть всё своими глазами.

<form action="#" id="form_test" class="test_form">
            <input id="name_form"  class="input_test_form" name="name" type="name" required 
                  placeholder="Ваше имя" value="">
            <input id="phone_form" class="input_test_form" name="phone" type="tel" required 
               placeholder="Номер телефона" value="">
            <button type="submit" class="test_button"> Отправить</button>
        </form>

const formTest = document.getElementById('form_test'),
  InputTestFor = document.querySelectorAll('.input_test_form');

function sendForm(f) {
  f.addEventListener('submit', (event) => {
    event.preventDefault();
    let dataForm = new FormData(f);
       function postData(d) {
      return new Promise((resolve, reject) => {
        let request = new XMLHttpRequest();
        request.open('POST', '/connection.php');
        request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
         request.onreadystatechange = function () {
          if (request.readyState < 4) {
            resolve();
          } else if (request.readyState === 4) {
            if (request.status == 200 && request.status < 300) {
             resolve();
            } else { reject(); }
          }
        };
        request.send(d);
        console.log(dataForm);
      });
    }
     function clearInput() {
      for (let i = 0; i < InputTestFor.length; i++) {
        InputTestFor[i].value = '';
      }
    }
    postData(dataForm)
      .then(() => { console.log('загрузка');})
      .then(() => { console.log('отправлено'); })
      .catch(() => { console.log('ошибка');})
      .then(clearInput);
  });
}
sendForm(formTest);

<?php
header("Access-Control-Allow-Origin: *"); 
$phone = $_POST["phone"];

$host = 'localhost'; // адрес сервера 
$database = 'yoga_tours'; // имя базы данных
$user = 'root'; // имя пользователя
$password = ''; // пароль
 
// подключаемся к серверу
$link = mysqli_connect($host, $user, $password, $database) 
    or die("Ошибка " . mysqli_error($link));

$sql = "INSERT INTO phones (id, phone) VALUES (NULL, '$phone')";
$result = mysqli_query($link, $sql) or die("Ошибка " . mysqli_error($link)); 

if($result)
{
    echo "Выполнение запроса прошло";
    echo $_POST['phone'];
}
 
// закрываем подключение
mysqli_close($link);
?>

Answer 1

[galaxy]

А вот это на кой ляд:

request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

??

Warning: When using FormData to submit POST requests using XMLHttpRequest or the Fetch_API with the multipart/form-data Content-Type (e.g. when uploading Files and Blobs to the server), do not explicitly set the Content-Type header on the request. Doing so will prevent the browser from being able to set the Content-Type header with the boundary expression it will use to delimit form fields in the request body.

https://developer.mozilla.org/en-US/docs/Web/API/F...

Comments

[Yarilo-Vitaly]

Эксперимента ради, загрузил код из учебника. Ошибок нет, результата тоже. Объект FormData пустой. В Network пусто. Рад любому совету.

<form   id="form_test" class="test_form" 
enctype="multipart/form-data" method="post" name="fileinfo">
    <label>Your email address:</label>
    <input id="name_form"  class="input_test_form"  type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32"
        maxlength="64" /><br />
    <label>Custom file label:</label>
    <input   id="phone_form" class="input_test_form"  type="text" name="filelabel" size="12" maxlength="32" /><br />
    <label>File to stash:</label>
    <input id="phone_img" class="input_test_form" type="file" name="file" required />
    <input  class="test_button" type="submit" value="Stash the file!" />
    <div class="test"></div>
</form>

var form = document.forms.namedItem("fileinfo");
 form.addEventListener('submit', function (ev) {
   var oOutput = document.querySelector(".test"),
    oData = new FormData(form);

  oData.append("myfile","filename.txt");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "/connection.php", true);
  oReq.onload = function (oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Загружено!";
    } else {
      oOutput.innerHTML = "Ошибка " + oReq.status + " при загрузки файла.<br \/>";
    }
  };

  oReq.send(oData);
 
   console.log(oData);
  ev.preventDefault();
}, false);

[galaxy]

Yarilo-Vitaly, работает ваш пример, только что проверил.

Вас смущает, что в консоли FormData выглядит как FormData {}? Это нормально. Распечатайте так, например:
console.log([...oData.entries()]);

[Yarilo-Vitaly]

Спасибо с этим разобрался. Пойду разбираться дальше.

[Yarilo-Vitaly]

Хотя остаётся вопрос. А почему в Network не отображается ?

[galaxy]

Yarilo-Vitaly, что не отображается? запрос есть
Данные во вкладке Payload наверное

[Yarilo-Vitaly]

10000 раз Спасибо.

Answer 2

[ThunderCat]

0) Проверить консоль браузера на ошибки, исправить.
1) Включить вывод ошибок в пхп.
2) проверить что ваш скрипт вообще что-то отправляет во вкладке нетворк (и что отправляет то что надо и куда надо)
3) так же в нетворк смотреть что пришло из ответа на запрос аяксом, если ошибка - исправлять

вроде все

PS:
$phone = $_POST["phone"]; может стоить проверить что вообще прислали?

$result = mysqli_query($link, $sql) or die("Ошибка " . mysqli_error($link));

дыра с инъекцией

if (request.status == 200 && request.status < 300) {...

ваще шедевр ))

Comments

[Yarilo-Vitaly]

Спасибо за поддержку. Решение galaxy galaxy всё разъяснило.