Bài viết này sẽ minh họa Đối tượng FormData trong JavaScript với sự trợ giúp của các ví dụ đơn giản nhất.
Đối tượng FormData trong JavaScript là gì?
Đối tượng FormData là một cách tiếp cận phổ biến để xây dựng bộ sưu tập dữ liệu trong JavaScript có thể được gửi đến máy chủ bằng cách sử dụng “ XMLHttpRequest ” hoặc truy xuất. Nó thực hiện các chức năng tương tự như phần tử biểu mẫu HTML. Nó có thể được so sánh với một mảng các mảng. Một mảng riêng biệt đại diện cho từng phần tử mà chúng tôi muốn truyền đến máy chủ.
cú pháp
Để sử dụng đối tượng FormData trong JavaScript, hãy sử dụng cú pháp sau:
hằng số biểu mẫuDữ liệu = mới Biểu mẫuDữ liệu ( ) ;
Ví dụ 1: Tạo đối tượng FormData không có biểu mẫu HTML
Trước hết, hãy khởi tạo một hằng số với một tên cụ thể và gán một giá trị cụ thể cho hằng số đó. Ở đây, “ FormData mới() ” được sử dụng như một giá trị không đổi:
Hằng số biểu mẫuDữ liệu = mới Biểu mẫuDữ liệu ( ) ;
Tiếp theo, nối thêm dữ liệu bằng cách chuyển các đối số trong “ nối thêm () ' phương pháp
formData. nối thêm ( 'Tên' , 'Nhân viên văn phòng' ) ;formData. nối thêm ( 'Tên' , 'Javed' ) ;
formData. nối thêm ( 'tuổi' , 25 ) ;
Sau đó, sử dụng “ console.log() ' phương pháp:
bảng điều khiển. đăng nhập ( 'Thông tin biểu mẫu' ) ;
Sử dụng ' vì ” để lặp lại và hiển thị đầu ra trên bàn điều khiển với sự trợ giúp của “ console.log() ' phương pháp:
vì ( để obj của formData ) {bảng điều khiển. đăng nhập ( đối tượng ) ;
}
Ví dụ 2: Tạo Đối tượng FormData Với Biểu mẫu HTML
Để thêm FormData bằng một biểu mẫu HTML, trước tiên, hãy tạo một biểu mẫu trong HTML với sự trợ giúp của “
- Để thêm trường nhập vào biểu mẫu, hãy sử dụng “ <đầu vào> ' yếu tố.
- Bên trong thẻ đầu vào, chỉ định “ kiểu ” thuộc tính để xác định kiểu dữ liệu của phần tử. Có nhiều giá trị có thể có cho thuộc tính này, bao gồm “ chữ ”, “ con số ”, “ ngày ”, “ mật khẩu ', và nhiều cái khác.
- Các ' giữ chỗ ” được sử dụng để thêm giá trị để hiển thị trên trường nhập và “tên” đề cập đến tên của trường nhập.
- “ trong một cái nhấp chuột ” sự kiện được kích hoạt khi người dùng thực hiện một chức năng bằng cách nhấp chuột:
< kiểu đầu vào = 'chữ' tên = 'Tên' giữ chỗ = 'Nhập tên của bạn' >< anh >< anh >
< kiểu đầu vào = 'chữ' tên = 'Tên' giữ chỗ = 'Nhập họ của bạn' >< anh >< anh >
< kiểu đầu vào = 'ngày' tên = 'tuổi' giữ chỗ = 'Nhập tuổi của bạn' >< anh >< anh >
< kiểu đầu vào = 'cái nút' giá trị = 'Đi vào' trong một cái nhấp chuột = 'dữ liệu()' >
hình thức >
Tiếp theo, truy cập biểu mẫu trong CSS và đặt khoảng trống xung quanh biểu mẫu:
. hình thức {lề : 20px ;
đệm : 30px ;
}
Hơn nữa, sử dụng thẻ script và thêm đoạn mã sau:
dữ liệu chức năng ( ) {là hình thức = tài liệu. getElementById ( 'hình thức' ) ;
constformData = newFormData ( hình thức ) ;
bảng điều khiển. đăng nhập ( 'Dữ liệu biểu mẫu' ) ;
vì ( hãy để obj offormData ) {
bảng điều khiển. đăng nhập ( đối tượng ) ;
}
}
Trong đoạn mã trên:
- Gọi “ getElementById(“biểu mẫu”) ” để truy cập biểu mẫu bằng cách sử dụng id biểu mẫu.
- Bây giờ, hãy lưu phần tử đã truy cập vào một hằng số mới “ biểu mẫuDữ liệu ”.
- Sử dụng ' vì ” để lặp lại và in ra các phần tử trên bàn điều khiển.
đầu ra
Bạn đã học về cách tạo đối tượng FormData trong JavaScript.
Phần kết luận
Một đối tượng FormData được sử dụng để xây dựng một bộ sưu tập dữ liệu trong JavaScript có thể được gửi đến máy chủ. Để tạo đối tượng Formdata trong JavaScript, hai phương pháp được trình bày. Cách thứ nhất là sử dụng JavaScript đơn giản và cách thứ hai là thông qua việc tạo biểu mẫu trong HTML và liên kết nó với JavaScript. Bài đăng này đã nêu về các đối tượng FormData trong JavaScript.