Formdata() trong javascript là gì?

Mỗi trường có các thuộc tính

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

4,

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

5 và

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

6 thích hợp, cùng với nhãn liên quan. Làm cách nào chúng tôi có thể lấy tất cả dữ liệu từ biểu mẫu này sau khi người dùng nhấp vào nút gửi?

Có hai cách. một cái giống như một bản hack bẩn, cái kia sạch hơn và thành ngữ quan trọng nhất

Để làm theo, hãy tạo một tệp có tên

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

0 trong cùng thư mục với biểu mẫu HTML. Hãy xem nào

Lấy các trường biểu mẫu từ mục tiêu sự kiện

Trước hết, chúng tôi đăng ký một trình lắng nghe sự kiện cho sự kiện

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

1 trên biểu mẫu để dừng hành vi mặc định (họ gửi dữ liệu đến back-end)

Sau đó, để truy cập trường biểu mẫu, chúng tôi sử dụng

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

2 hoặc

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

3

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

Ở đây chúng tôi hủy cấu trúc ba trường từ

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

2. Nếu chúng ta biết trước các trường thì phương pháp này có thể chấp nhận được

Thay vào đó, nếu có khả năng nhiều trường hơn sẽ được thêm động để đáp ứng với một số tương tác của người dùng, thì chúng ta cần sử dụng

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

5

Hãy xem làm thế nào

Đi thành ngữ với FormData

Trước hết, chúng tôi đăng ký một trình lắng nghe sự kiện cho sự kiện

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

1 trên biểu mẫu để dừng hành vi mặc định

Sau đó, chúng tôi xây dựng một đối tượng

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

5 từ biểu mẫu

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  // do stuff
});

Ngoài

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

8,

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

9,

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  // do stuff
});

0,

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  // do stuff
});

1,

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

5 còn triển khai

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  // do stuff
});

3. Điều này có nghĩa là nó có thể lặp lại với

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  // do stuff
});

4

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

7

Mỗi bước lặp cung cấp cho bạn một mảng các mục, trong đó mỗi mảng có thứ tự

• thuộc tính tên của trường biểu mẫu
• giá trị đầu vào

Đây là một ví dụ

Ngoài các phương thức đã nói ở trên, phương thức

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  // do stuff
});

5 cung cấp khả năng lấy một mảng các mục

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

9

Điều này hoạt động tốt với

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  // do stuff
});

6 (ECMAScript 2019)

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

1

Tại sao điều này hữu ích?

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

2

Khi bạn có đối tượng, bạn có thể gửi tải trọng bằng Tìm nạp

cạm bẫy. bỏ thuộc tính

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

6 trên các trường biểu mẫu. Các trường biểu mẫu không có thuộc tính

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

6 phù hợp sẽ không hiển thị trong đối tượng kết quả là

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

5

FormData trong một yêu cầu là gì?

Việc sử dụng FormData trong React JS là gì?

FormData trong Ajax là gì?

Loại nội dung nào là FormData?