programming javascript

Làm cách nào để bạn nhận được dữ liệu biểu mẫu khi gửi bằng javascript?

Điều đặc biệt về


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

1 là các phương thức mạng, chẳng hạn như


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

2, có thể chấp nhận đối tượng


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

1 làm phần thân. Nó được mã hóa và gửi đi với


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

Từ quan điểm của máy chủ, nó trông giống như một biểu mẫu gửi thông thường

Trước tiên hãy gửi một biểu mẫu đơn giản

Như bạn có thể thấy, đó gần như là một lớp lót


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

Trong ví dụ này, mã máy chủ không được trình bày, vì nó nằm ngoài phạm vi của chúng tôi. Máy chủ chấp nhận yêu cầu POST và trả lời "Người dùng đã lưu"

Chúng tôi có thể sửa đổi các trường trong


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

1 bằng các phương thức


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

2 – thêm trường biểu mẫu với


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

3 và


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

4 đã cho,


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

5 – thêm một trường như thể nó là


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

6, đối số thứ ba


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

7 đặt tên tệp [không phải tên trường biểu mẫu], vì đây là tên của tệp trong hệ thống tệp của người dùng,


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

8 – xóa trường với


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

3 đã cho,


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

00 – lấy giá trị của trường với


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

3 đã cho,


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

02 – nếu tồn tại trường có giá trị


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

3 đã cho, trả về


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

04, nếu không thì trả về


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

Về mặt kỹ thuật, một biểu mẫu được phép có nhiều trường có cùng tên


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

3, do đó, nhiều lệnh gọi tới


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

07 sẽ thêm nhiều trường cùng tên hơn

Ngoài ra còn có phương thức


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

08, với cú pháp tương tự như


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

07. Sự khác biệt là


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

00 xóa tất cả các trường có


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

3 đã cho, sau đó nối thêm một trường mới. Vì vậy, nó đảm bảo rằng chỉ có một trường có


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

3 như vậy, phần còn lại giống như


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

04,


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

Ngoài ra, chúng ta có thể lặp qua các trường formData bằng cách sử dụng vòng lặp


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

Biểu mẫu luôn được gửi dưới dạng


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

0, bảng mã này cho phép gửi tệp. Vì vậy, các trường


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

6 cũng được gửi, tương tự như việc gửi biểu mẫu thông thường

Đây là một ví dụ với hình thức như vậy


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

Như chúng ta đã thấy trong chương Tìm nạp, thật dễ dàng để gửi dữ liệu nhị phân được tạo động. g. một hình ảnh, như


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

09. Chúng tôi có thể cung cấp trực tiếp dưới dạng tham số


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

Tuy nhiên, trên thực tế, việc gửi một hình ảnh không riêng biệt mà là một phần của biểu mẫu, với các trường bổ sung, chẳng hạn như “tên” và siêu dữ liệu khác, thường rất thuận tiện.

Ngoài ra, các máy chủ thường phù hợp hơn để chấp nhận các biểu mẫu được mã hóa nhiều phần, thay vì dữ liệu nhị phân thô

Ví dụ này gửi một hình ảnh từ


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

22, cùng với một số trường khác, dưới dạng biểu mẫu, sử dụng


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

Xin lưu ý cách hình ảnh


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

09 được thêm vào


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

Điều đó giống như nếu có


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

25 trong biểu mẫu và khách truy cập đã gửi tệp có tên


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

26 [đối số thứ 3] với dữ liệu


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

27 [đối số thứ 2] từ hệ thống tệp của họ

Máy chủ đọc dữ liệu biểu mẫu và tệp, như thể đó là một lần gửi biểu mẫu thông thường

các đối tượng được sử dụng để nắm bắt biểu mẫu HTML và gửi nó bằng cách sử dụng


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

2 hoặc một phương thức mạng khác

Chúng ta có thể tạo


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

29 từ một biểu mẫu HTML hoặc tạo một đối tượng hoàn toàn không có biểu mẫu, sau đó nối thêm các trường bằng các phương thức

Làm cách nào để nhận các giá trị biểu mẫu khi gửi trong JavaScript?

Sử dụng FormData Constructor để lắng nghe sự kiện gửi của biểu mẫu và nhận giá trị khi chúng tôi gửi . Trước tiên chúng tôi lấy phần tử biểu mẫu với tài liệu. bộ chọn truy vấn. Sau đó, chúng tôi gọi addEventListener để thêm trình lắng nghe sự kiện vào biểu mẫu.

Làm cách nào để thu thập FormData bằng JavaScript?

Phương thức serializeArray[] tạo một mảng đối tượng [tên và giá trị] bằng cách tuần tự hóa các giá trị biểu mẫu . Phương pháp này có thể được sử dụng để lấy dữ liệu biểu mẫu. Tham số. Nó không chấp nhận bất kỳ tham số nào. Giá trị trả về. Nó trả về tất cả giá trị bên trong các trường đầu vào.

Làm cách nào tôi có thể hiển thị FormData sau khi gửi?

Thuộc tính formtarget chỉ định tên hoặc từ khóa cho biết vị trí hiển thị phản hồi nhận được sau khi gửi biểu mẫu . Thuộc tính formtarget ghi đè thuộc tính target của phần tử

Làm cách nào để sử dụng JavaScript để gửi biểu mẫu?

Khi chúng ta click vào link thì hàm submitForm[] sẽ được thực thi. Hàm này sẽ lấy đối tượng phần tử bằng phương thức DOM getElementById[] bằng cách chuyển id biểu mẫu cho phương thức này, sau đó biểu mẫu sẽ được gửi bằng cách sử dụng phương thức submit[]. Ví dụ. Tạo một biểu mẫu và gửi nó bằng cách sử dụng phương pháp trên

Làm cách nào để nhận các giá trị biểu mẫu khi gửi trong JavaScript?

Làm cách nào để thu thập FormData bằng JavaScript?

Làm cách nào tôi có thể hiển thị FormData sau khi gửi?

Làm cách nào để sử dụng JavaScript để gửi biểu mẫu?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề