Неправильная отправка данных формы в html - PullRequest
Новая
       9

Неправильная отправка данных формы в html

0 голосов
/ 24 апреля 2020

Так что я хотел бы отправить все, что я наберу в моей строке ввода, чтобы отправить на любую ссылку API через почтовый метод. Но всякий раз, когда я отправляю это, я получаю {}. Проблема в том, что когда я ничего не отправляю в строке ввода, АКА оставлена ​​пустой и нажимаю «Отправить», я все равно получаю {}. Но когда я набираю gibberi sh, все равно {}. Поэтому я предполагаю, что все, что я набрал, не отправляется по ссылке API.

Кроме того, когда я жестко кодирую что-то вроде body: JSON.stringify(this.myForm), это появляется как ответ в конце. Поэтому я считаю, что ошибка лежит в этом теле моего запроса на выборку. Вот мой код, что я должен поставить для тела. 

<html>

<body>
  <h1>Draft V0.1</h1>

  <form class="form" id="myForm">
    <label for="skill">add skill</label>
    <input type="text" name="skill" id="skill">
    <button type="submit">Submit</button>
  </form>

  <script>
    const myForm = document.getElementById('myForm')


    myForm.addEventListener('submit', function (e) {
      e.preventDefault();

      const formData = new FormData(this);

      fetch('https://fj5s3i60a8.execute-api.us-east-1.amazonaws.com/updateSkill', {
        method: 'post',
        body: JSON.stringify(new FormData(myForm)),
        headers:
        {
          "Content-Type": "application/json; charset=utf-8",
          "Accept": 'application/json'
        }
      }).then(function (response) {
        console.log(response)
        return response.json();
      });
    });
  </script>

</body>

</html>
  • Заметьте, я слепо играю с телом, чтобы посмотреть, что я могу через него проанализировать, но в итоге я получаю ошибки cors.

Спасибо аванс

1 Ответ

0 голосов
/ 24 апреля 2020 

const thisForm = document.getElementById('myForm');
thisForm.addEventListener('submit', async function (e) {
    e.preventDefault();
    const formData = new FormData(thisForm).entries()
    const response = await fetch('https://reqres.in/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(Object.fromEntries(formData))
    });

    const result = await response.json();
    console.log(result)
});
<html>

<body>
  <h1>Draft V0.1</h1>

  <form class="form" id="myForm">
    <label for="skill">add skill</label>
    <input type="text" name="skill" id="skill">
    <button type="submit">Submit</button>
  </form>

  </body>

</html>
...