Làm cách nào để gửi dữ liệu từ biểu mẫu tới JavaScript?

Điều đặc biệt về FormData là các phương thức mạng, chẳng hạn như fetch, có thể chấp nhận đối tượng FormData làm phần thân. Nó được mã hóa và gửi đi với

0

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

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 FormData bằng các phương thức

  • 2 – thêm một trường biểu mẫu với
    3 và
    4 đã cho,
  • 5 – thêm một trường như thể nó là
    6, đối số thứ ba
    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,
  • 8 – xóa trường với
    3 đã cho,
  • let formData = new FormData();
    formData.append('key1', 'value1');
    formData.append('key2', 'value2');
    
    // List key/value pairs
    for(let [name, value] of formData) {
      alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
    }
    0 – lấy giá trị của trường với
    3 đã cho,
  • let formData = new FormData();
    formData.append('key1', 'value1');
    formData.append('key2', 'value2');
    
    // List key/value pairs
    for(let [name, value] of formData) {
      alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
    }
    2 – nếu tồn tại trường có giá trị
    3 đã cho, trả về
    let formData = new FormData();
    formData.append('key1', 'value1');
    formData.append('key2', 'value2');
    
    // List key/value pairs
    for(let [name, value] of formData) {
      alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
    }
    4, nếu không thì trả về
    let formData = new FormData();
    formData.append('key1', 'value1');
    formData.append('key2', 'value2');
    
    // List key/value pairs
    for(let [name, value] of formData) {
      alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
    }
    5

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

3, do đó, nhiều cuộc gọi tới
let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// List key/value pairs
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}
7 sẽ thêm nhiều trường cùng tên hơn

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

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// List key/value pairs
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}
8, với cú pháp tương tự như
let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// List key/value pairs
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}
7. Sự khác biệt là
Picture:
0 xóa tất cả các trường có
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ó
3 như vậy, phần còn lại giống như
let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// List key/value pairs
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}
7

  • Picture:
    4,
  • Picture:
    5

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

Picture:
6

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// List key/value pairs
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}

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

0, bảng mã này cho phép gửi tệp. Vì vậy, _________6 trường cũng được gửi, tương tự như 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

Picture:

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ư

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

  

  

  
1

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ừ


  

  

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


  

  

  

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

Picture:
9 được thêm vào

formData.append("image", imageBlob, "image.png");

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


  

  

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

  

  

  
6 (đối số thứ 3) với dữ liệu

  

  

  
7 (đố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 fetch hoặc một phương thức mạng khác

Chúng ta có thể tạo


  

  

  
9 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 để thêm FormData trong JavaScript?

Chúng ta có thể tạo FormData(form) mới 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. biểu mẫuDữ liệu. append(tên, giá trị) formData. .
biểu mẫuDữ liệu. xóa (tên)
biểu mẫuDữ liệu. lấy (tên)
biểu mẫuDữ liệu. có (tên)

Làm cách nào để gửi dữ liệu từ biểu mẫu HTML đến cơ sở dữ liệu bằng JavaScript?

Cách chèn dữ liệu biểu mẫu vào MySQL bằng Node js Express .
Bước 1 – Tạo ứng dụng Node Express js
Bước 2 – Tạo bảng trong cơ sở dữ liệu MySQL
Bước 3 – Cài đặt phụ thuộc mysql flash ejs body-parser
Bước 4 – Tạo biểu mẫu đánh dấu HTML
Bước 5 – Tạo máy chủ. tệp js và tệp kết nối cơ sở dữ liệu
Bước 6 – Khởi động máy chủ ứng dụng

Làm cách nào để lưu FormData trong JavaScript?

hãy để saveFile = () => {
// Lấy dữ liệu từ từng phần tử trên form
tên const = tài liệu. getElementById("txtName");
const tuổi = tài liệu. getElementById("txtAge");
const email = tài liệu. getElementById("txtEmail");
const country = tài liệu. getElementById("selCountry");
const msg = tài liệu