godsplane
@godsplane

Нормально ли на бек отправлять данные формы в виде объекта?

Я написал скрипт, который собирает все инпуты и текстареа и их value и отправляет данные на сервер в виде объекта:
{
 1: 'name',
 2: 'text'
 3: 'email'
 4: '799999000'
 etc..
}

Удобно ли будет бекенду принять такой вид данных ?
Если нет, то как сделать лучше?Просто у меня там все идет перебором и вряд ли я могу отправить ему массив объектов с label + value. так как я тупо не знаю как это сделать.
Мой говнокод

// Не знаю зачем я это написал, наверное чтобы показать что я могу наговнодить

import { Validation } from "./Validation";
const API_URL = "https://jsonplaceholder.typicode.com/posts";
export default class Form extends Validation {
  constructor(form, label = ".js-label-input") {
    super();
    this.form = form;
    this.label = label;
    this.formStatus = false;
    this.listener();
  }
  validation(target) {
    if (this.validate(target)) {
      return true;
    } else {
      return false;
    }
  }
  data(e) {
    const inputs = e.target.querySelectorAll(`${this.label} input, ${this.label} textarea`);
    console.log(inputs);
    const inputsValues = [...inputs].map((elem) => {
      return elem.value;
    });
    console.log(inputsValues);
    return inputsValues;
  }
  submit(e) {
    const inputsValues = this.data(e);
    fetch(API_URL, {
      method: "POST",
      body: JSON.stringify({ ...inputsValues }),
      headers: {
        "Content-type": "application/json; charset=UTF-8",
      },
    })
      .then((res) => res.json())
      .then((json) => console.log(json));
  }
  listener() {
    document.addEventListener("submit", (e) => {
      if (e.target.closest(this.form)) {
        const inputs = e.target.querySelectorAll(`${this.label} input, ${this.label} textarea`);
        e.preventDefault();
        inputs.forEach((elem) => {
          if (this.validation(elem)) {
            this.formStatus = true;
            e.target.classList.add("success");
            elem.classList.remove("validate-error");
            setTimeout(() => {
              e.target.classList.remove("success");
            }, 3000);
          } else {
            elem.classList.add("validate-error");
          }
        });
        if (this.formStatus) {
          this.submit(e);
          inputs.forEach((elem) => (elem.value = ""));
        }
      }
    });
  }
}

  • Вопрос задан
  • 147 просмотров
Решения вопроса 1
DevMan
@DevMan
например, так.

google -> js serialize form
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы