Hướng dẫn how do i post form data using javascript? - làm cách nào để đăng dữ liệu biểu mẫu bằng javascript?

Question

Đối tượng

const formData = new FormData(someFormElement);

0 cho phép bạn biên dịch một tập hợp các cặp khóa/giá trị để gửi bằng

const formData = new FormData(someFormElement);

1. Nó chủ yếu nhằm sử dụng trong việc gửi dữ liệu biểu mẫu, nhưng có thể được sử dụng độc lập từ các biểu mẫu để truyền dữ liệu có khóa. Dữ liệu được truyền ở cùng định dạng mà phương thức

const formData = new FormData(someFormElement);

2 của biểu mẫu sẽ sử dụng để gửi dữ liệu nếu loại mã hóa của biểu mẫu được đặt thành

const formData = new FormData(someFormElement);

3.

Nội dung chính Show

Tạo một đối tượng formdata từ đầu
Lấy một đối tượng formdata từ biểu mẫu HTML
Gửi các tệp bằng đối tượng formData
Sử dụng một sự kiện formData
Gửi biểu mẫu và tải lên các tệp qua AJAX mà không có đối tượng const formData = new FormData(someFormElement); 0
Làm thế nào để bạn đăng dữ liệu từ một biểu mẫu?
Tôi có thể sử dụng JavaScript để gửi biểu mẫu không?
Làm thế nào lưu trữ formdata trong javascript?
Làm cách nào để tải lên một tệp bằng formdata?

Tạo một đối tượng formdata từ đầu

Bạn có thể tự xây dựng một đối tượng ____10, khởi tạo nó sau đó nối các trường vào nó bằng cách gọi phương thức

const formData = new FormData(someFormElement);

5 của nó, như thế này:

const formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"

// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like object
const content = 'hey!'; // the body of the new file…
const blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

const request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

Lưu ý: Cả hai trường "userFile" và "webmasterfile" cả hai đều chứa một tệp. Số được gán cho trường "Tài khoản" một chuỗi). The fields "userfile" and "webmasterfile" both contain a file. The number assigned to the field "accountnum" is immediately converted into a string by the

const formData = new FormData(someFormElement);

6 method (the field's value can be a

const formData = new FormData(someFormElement);

7,

const formData = new FormData(someFormElement);

8, or a string: if the value is neither a Blob nor a File, the value is converted to a string).

Ví dụ này xây dựng một thể hiện

const formData = new FormData(someFormElement);

0 chứa các giá trị cho các trường có tên "Tên người dùng", "ACCKNUM", "UserFile" và "WebMasterFile", sau đó sử dụng phương thức

const formData = new FormData(someFormElement);

1

const formElement = document.querySelector("form");
const request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

1 để gửi dữ liệu của biểu mẫu. Trường "WebMasterFile" là một

const formData = new FormData(someFormElement);

7. Một đối tượng

const formData = new FormData(someFormElement);

7 đại diện cho một đối tượng giống như tệp của dữ liệu thô, bất biến. Blobs đại diện cho dữ liệu không nhất thiết phải ở định dạng-bản địa JavaScript. Giao diện

const formData = new FormData(someFormElement);

8 dựa trên

const formData = new FormData(someFormElement);

7, kế thừa chức năng Blob và mở rộng nó để hỗ trợ các tệp trên hệ thống của người dùng. Để xây dựng một

const formData = new FormData(someFormElement);

7, bạn có thể gọi

const formElement = document.querySelector("form");
const request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

7.

Lấy một đối tượng formdata từ biểu mẫu HTML

Để xây dựng một đối tượng

const formData = new FormData(someFormElement);

0 chứa dữ liệu từ

const formElement = document.querySelector("form");
const request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

9 hiện có, chỉ định phần tử biểu mẫu đó khi tạo đối tượng

const formData = new FormData(someFormElement);

0:

Lưu ý: FormData sẽ chỉ sử dụng các trường đầu vào sử dụng thuộc tính tên. FormData will only use input fields that use the name attribute.

const formData = new FormData(someFormElement);

Ví dụ:

const formElement = document.querySelector("form");
const request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

Bạn cũng có thể thêm dữ liệu bổ sung vào đối tượng

const formData = new FormData(someFormElement);

0 giữa việc lấy nó từ một biểu mẫu và gửi nó, như thế này:

const formElement = document.querySelector("form");
const formData = new FormData(formElement);
const request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

Điều này cho phép bạn tăng dữ liệu của biểu mẫu trước khi gửi nó theo, để bao gồm thông tin bổ sung không nhất thiết là người dùng.

Gửi các tệp bằng đối tượng formData

Bạn cũng có thể gửi các tập tin bằng

const formData = new FormData(someFormElement);

0. Bao gồm một yếu tố

const formElement = document.querySelector("form");
const formData = new FormData(formElement);
const request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

3 loại

const formElement = document.querySelector("form");
const formData = new FormData(formElement);
const request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

4 trong

const formElement = document.querySelector("form");
const request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

9 của bạn:

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <p>
    <label
      >Your email address:
      <input
        type="email"
        autocomplete="on"
        name="userid"
        placeholder="email"
        required
        size="32"
        maxlength="64" />
    label>
  p>
  <p>
    <label
      >Custom file label:
      <input type="text" name="filelabel" size="12" maxlength="32" />
    label>
  p>
  <p>
    <label
      >File to stash:
      <input type="file" name="file" required />
    label>
  p>
  <p>
    <input type="submit" value="Stash the file!" />
  p>
form>
<div>div>

Sau đó, bạn có thể gửi nó bằng mã như sau:

const form = document.forms.namedItem("fileinfo");
form.addEventListener(
  "submit",
  (event) => {
    const output = document.querySelector("output");
    const formData = new FormData(form);

    formData.append("CustomField", "This is some extra data");

    const request = new XMLHttpRequest();
    request.open("POST", "stash.php", true);
    request.onload = (progress) => {
      output.innerHTML =
        request.status === 200
          ? "Uploaded!"
          : `Error ${request.status} occurred when trying to upload your file.
`;
    };

    request.send(formData);
    event.preventDefault();
  },
  false
);

Lưu ý: Nếu bạn chuyển trong tham chiếu đến biểu mẫu, phương thức yêu cầu được chỉ định trong biểu mẫu sẽ được sử dụng qua phương thức được chỉ định trong lệnh gọi Open (). If you pass in a reference to the form, the request method specified in the form will be used over the method specified in the open() call.

CẢNH BÁO: Khi sử dụng FormData để gửi yêu cầu POST bằng cách sử dụng

const formData = new FormData(someFormElement);

1 hoặc
const formElement = document.querySelector("form"); const formData = new FormData(formElement); const request = new XMLHttpRequest(); request.open("POST", "submitform.php"); formData.append("serialnumber", serialNumber++); request.send(formData);
7 với loại nội dung
const formData = new FormData(someFormElement);
3 (ví dụ: khi tải các tệp và đốm màu lên máy chủ), không đặt tiêu đề
const formElement = document.querySelector("form"); const formData = new FormData(formElement); const request = new XMLHttpRequest(); request.open("POST", "submitform.php"); formData.append("serialnumber", serialNumber++); request.send(formData);
9 một cách rõ ràng theo yêu cầu. Làm như vậy sẽ ngăn trình duyệt không thể đặt tiêu đề loại nội dung với biểu thức ranh giới mà nó sẽ sử dụng để phân định các trường biểu mẫu trong thân yêu cầu. When using FormData to submit POST requests using

const formData = new FormData(someFormElement);

1 or the

const formElement = document.querySelector("form");
const formData = new FormData(formElement);
const request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

7 with the

const formData = new FormData(someFormElement);

3 Content-Type (e.g. when uploading Files and Blobs to the server), do not explicitly set the

const formElement = document.querySelector("form");
const formData = new FormData(formElement);
const request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

9 header on the request. Doing so will prevent the browser from being able to set the Content-Type header with the boundary expression it will use to delimit form fields in the request body.

Bạn cũng có thể nối trực tiếp một

const formData = new FormData(someFormElement);

8 hoặc

const formData = new FormData(someFormElement);

7 vào đối tượng

const formData = new FormData(someFormElement);

0, như thế này:

data.append("myfile", myBlob, "filename.txt");

Khi sử dụng phương thức

const formData = new FormData(someFormElement);

5, có thể sử dụng tham số tùy chọn thứ ba để chuyển tên tệp bên trong tiêu đề

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <p>
    <label
      >Your email address:
      <input
        type="email"
        autocomplete="on"
        name="userid"
        placeholder="email"
        required
        size="32"
        maxlength="64" />
    label>
  p>
  <p>
    <label
      >Custom file label:
      <input type="text" name="filelabel" size="12" maxlength="32" />
    label>
  p>
  <p>
    <label
      >File to stash:
      <input type="file" name="file" required />
    label>
  p>
  <p>
    <input type="submit" value="Stash the file!" />
  p>
form>
<div>div>

4 được gửi đến máy chủ. Khi không có tên tệp được chỉ định (hoặc tham số không được hỗ trợ), tên "Blob" được sử dụng.

Sử dụng một sự kiện formData

Một bổ sung gần đây hơn cho nền tảng so với đối tượng

const formData = new FormData(someFormElement);

0 là sự kiện

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <p>
    <label
      >Your email address:
      <input
        type="email"
        autocomplete="on"
        name="userid"
        placeholder="email"
        required
        size="32"
        maxlength="64" />
    label>
  p>
  <p>
    <label
      >Custom file label:
      <input type="text" name="filelabel" size="12" maxlength="32" />
    label>
  p>
  <p>
    <label
      >File to stash:
      <input type="file" name="file" required />
    label>
  p>
  <p>
    <input type="submit" value="Stash the file!" />
  p>
form>
<div>div>

6 - điều này được kích hoạt trên một đối tượng

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <p>
    <label
      >Your email address:
      <input
        type="email"
        autocomplete="on"
        name="userid"
        placeholder="email"
        required
        size="32"
        maxlength="64" />
    label>
  p>
  <p>
    <label
      >Custom file label:
      <input type="text" name="filelabel" size="12" maxlength="32" />
    label>
  p>
  <p>
    <label
      >File to stash:
      <input type="file" name="file" required />
    label>
  p>
  <p>
    <input type="submit" value="Stash the file!" />
  p>
form>
<div>div>

7 sau khi danh sách mục nhập đại diện cho dữ liệu của biểu mẫu được xây dựng. Điều này xảy ra khi biểu mẫu được gửi, nhưng cũng có thể được kích hoạt bằng cách gọi một hàm tạo

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <p>
    <label
      >Your email address:
      <input
        type="email"
        autocomplete="on"
        name="userid"
        placeholder="email"
        required
        size="32"
        maxlength="64" />
    label>
  p>
  <p>
    <label
      >Custom file label:
      <input type="text" name="filelabel" size="12" maxlength="32" />
    label>
  p>
  <p>
    <label
      >File to stash:
      <input type="file" name="file" required />
    label>
  p>
  <p>
    <input type="submit" value="Stash the file!" />
  p>
form>
<div>div>

8.

Điều này cho phép một đối tượng

const formData = new FormData(someFormElement);

0 nhanh chóng thu được để đối phó với vụ bắn sự kiện

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <p>
    <label
      >Your email address:
      <input
        type="email"
        autocomplete="on"
        name="userid"
        placeholder="email"
        required
        size="32"
        maxlength="64" />
    label>
  p>
  <p>
    <label
      >Custom file label:
      <input type="text" name="filelabel" size="12" maxlength="32" />
    label>
  p>
  <p>
    <label
      >File to stash:
      <input type="file" name="file" required />
    label>
  p>
  <p>
    <input type="submit" value="Stash the file!" />
  p>
form>
<div>div>

6, thay vì cần phải tự kết hợp nó.

Thông thường, điều này được sử dụng như thể hiện trong bản demo sự kiện FormData đơn giản của chúng tôi - trong JavaScript, chúng tôi tham khảo một biểu mẫu:

const formElem = document.querySelector('form');

Trong trình xử lý sự kiện

const form = document.forms.namedItem("fileinfo");
form.addEventListener(
  "submit",
  (event) => {
    const output = document.querySelector("output");
    const formData = new FormData(form);

    formData.append("CustomField", "This is some extra data");

    const request = new XMLHttpRequest();
    request.open("POST", "stash.php", true);
    request.onload = (progress) => {
      output.innerHTML =
        request.status === 200
          ? "Uploaded!"
          : `Error ${request.status} occurred when trying to upload your file.
`;
    };

    request.send(formData);
    event.preventDefault();
  },
  false
);

1 của chúng tôi, chúng tôi sử dụng

const form = document.forms.namedItem("fileinfo");
form.addEventListener(
  "submit",
  (event) => {
    const output = document.querySelector("output");
    const formData = new FormData(form);

    formData.append("CustomField", "This is some extra data");

    const request = new XMLHttpRequest();
    request.open("POST", "stash.php", true);
    request.onload = (progress) => {
      output.innerHTML =
        request.status === 200
          ? "Uploaded!"
          : `Error ${request.status} occurred when trying to upload your file.
`;
    };

    request.send(formData);
    event.preventDefault();
  },
  false
);

2 để dừng việc gửi biểu mẫu mặc định, sau đó gọi một hàm tạo

const formData = new FormData(someFormElement);

0 để kích hoạt sự kiện

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <p>
    <label
      >Your email address:
      <input
        type="email"
        autocomplete="on"
        name="userid"
        placeholder="email"
        required
        size="32"
        maxlength="64" />
    label>
  p>
  <p>
    <label
      >Custom file label:
      <input type="text" name="filelabel" size="12" maxlength="32" />
    label>
  p>
  <p>
    <label
      >File to stash:
      <input type="file" name="file" required />
    label>
  p>
  <p>
    <input type="submit" value="Stash the file!" />
  p>
form>
<div>div>

6:

formElem.addEventListener('submit', (e) => {
  // on form submission, prevent default
  e.preventDefault();

  // construct a FormData object, which fires the formdata event
  new FormData(formElem);
});

Khi sự kiện

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <p>
    <label
      >Your email address:
      <input
        type="email"
        autocomplete="on"
        name="userid"
        placeholder="email"
        required
        size="32"
        maxlength="64" />
    label>
  p>
  <p>
    <label
      >Custom file label:
      <input type="text" name="filelabel" size="12" maxlength="32" />
    label>
  p>
  <p>
    <label
      >File to stash:
      <input type="file" name="file" required />
    label>
  p>
  <p>
    <input type="submit" value="Stash the file!" />
  p>
form>
<div>div>

6 bắn, chúng ta có thể truy cập đối tượng

const formData = new FormData(someFormElement);

0 bằng cách sử dụng

const form = document.forms.namedItem("fileinfo");
form.addEventListener(
  "submit",
  (event) => {
    const output = document.querySelector("output");
    const formData = new FormData(form);

    formData.append("CustomField", "This is some extra data");

    const request = new XMLHttpRequest();
    request.open("POST", "stash.php", true);
    request.onload = (progress) => {
      output.innerHTML =
        request.status === 200
          ? "Uploaded!"
          : `Error ${request.status} occurred when trying to upload your file.
`;
    };

    request.send(formData);
    event.preventDefault();
  },
  false
);

7, sau đó thực hiện những gì chúng ta thích với nó (bên dưới chúng ta đăng nó lên máy chủ bằng

const formData = new FormData(someFormElement);

1).

formElem.addEventListener('formdata', (e) => {
  console.log('formdata fired');

  // Get the form data from the event object
  const data = e.formData;
  for (const value of data.values()) {
    console.log(value);
  }

  // submit the data via XHR
  const request = new XMLHttpRequest();
  request.open("POST", "/formHandler");
  request.send(data);
});

Lưu ý: Sự kiện

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <p>
    <label
      >Your email address:
      <input
        type="email"
        autocomplete="on"
        name="userid"
        placeholder="email"
        required
        size="32"
        maxlength="64" />
    label>
  p>
  <p>
    <label
      >Custom file label:
      <input type="text" name="filelabel" size="12" maxlength="32" />
    label>
  p>
  <p>
    <label
      >File to stash:
      <input type="file" name="file" required />
    label>
  p>
  <p>
    <input type="submit" value="Stash the file!" />
  p>
form>
<div>div>

6 và đối tượng
data.append("myfile", myBlob, "filename.txt");
0 có sẵn trong Chrome từ phiên bản 77 (và các crom tương đương khác) và Firefox 72 (lần đầu tiên có sẵn sau
data.append("myfile", myBlob, "filename.txt");
1 pref trong Firefox 71). The

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <p>
    <label
      >Your email address:
      <input
        type="email"
        autocomplete="on"
        name="userid"
        placeholder="email"
        required
        size="32"
        maxlength="64" />
    label>
  p>
  <p>
    <label
      >Custom file label:
      <input type="text" name="filelabel" size="12" maxlength="32" />
    label>
  p>
  <p>
    <label
      >File to stash:
      <input type="file" name="file" required />
    label>
  p>
  <p>
    <input type="submit" value="Stash the file!" />
  p>
form>
<div>div>

6 event and

data.append("myfile", myBlob, "filename.txt");

0 object are available in Chrome from version 77 (and other equivalent Chromiums), and Firefox 72 (first available behind the

data.append("myfile", myBlob, "filename.txt");

1 pref in Firefox 71).

Gửi biểu mẫu và tải lên các tệp qua AJAX mà không có đối tượng const formData = new FormData(someFormElement); 0

Nếu bạn muốn biết cách tuần tự hóa và gửi biểu mẫu qua AJAX mà không cần sử dụng các đối tượng FormData, vui lòng đọc đoạn này.

Gotchas

Đối tượng

const formData = new FormData(someFormElement);

0 không bao gồm dữ liệu từ các trường bị vô hiệu hóa hoặc các trường bị vô hiệu hóa.

Xem thêm

Làm thế nào để bạn đăng dữ liệu từ một biểu mẫu?

Để đăng dữ liệu biểu mẫu HTML lên máy chủ ở định dạng được mã hóa URL, bạn cần thực hiện yêu cầu POST HTTP cho máy chủ và cung cấp dữ liệu biểu mẫu HTML trong phần thân của thông báo bài đăng. Bạn cũng cần chỉ định kiểu dữ liệu bằng cách sử dụng tiêu đề yêu cầu loại nội dung: Ứng dụng/X-www-form-urlencoded.make an HTTP POST request to the server and provide the HTML form data in the body of the POST message. You also need to specify the data type using the Content-Type: application/x-www-form-urlencoded request header.

Tôi có thể sử dụng JavaScript để gửi biểu mẫu không?

Việc gửi biểu mẫu JavaScript có thể được sử dụng để tạo đối tượng và các thuộc tính khác nhau cũng có thể được sử dụng.Các thuộc tính có thể là lớp, id, thẻ, v.v. Gọi bởi các thuộc tính khá đơn giản, chúng ta chỉ cần đặt các ký hiệu đúng cách.. The attributes can be class, id, tag, etc. Calling by attributes is quite simple, we just need to place the symbols properly.

Làm thế nào lưu trữ formdata trong javascript?

Nếu bạn muốn lưu nó trên cơ sở dữ liệu.Gửi biểu mẫu đến một trang có thể chạy một số mã back-end, như PHP, ASP, Coldfision, JSP hoặc ngôn ngữ yêu thích của bạn là gì.Lưu ý: Một cách lưu trữ dữ liệu hiện đại hơn là sử dụng window.localstorage.using Window. localStorage.

Làm cách nào để tải lên một tệp bằng formdata?

Bạn có thể tải lên tệp đã chọn bằng cách tạo một lớp formData và chuyển nó sang hàm post () của Axios.const input = tài liệu.Truy vấnSelector ('#my input');const formData = new formData ();formdata.nối ('myfile', đầu vào.creating a FormData class and passing it to Axios' post() function. const input = document. querySelector('#my-input'); const formData = new FormData(); formData. append('myFile', input.

programming javascript Content-Type: multipart/form-data Multipart/form-data Swagger fetch multipart/form-data form-data npm Axios post form-data Form POST HTML

Hướng dẫn how do i post form data using javascript? - làm cách nào để đăng dữ liệu biểu mẫu bằng javascript?

Tạo một đối tượng formdata từ đầu

Lấy một đối tượng formdata từ biểu mẫu HTML

Gửi các tệp bằng đối tượng formData

Sử dụng một sự kiện formData

Gửi biểu mẫu và tải lên các tệp qua AJAX mà không có đối tượng const formData = new FormData(someFormElement); 0

Gotchas

Xem thêm

Làm thế nào để bạn đăng dữ liệu từ một biểu mẫu?

Tôi có thể sử dụng JavaScript để gửi biểu mẫu không?

Làm thế nào lưu trữ formdata trong javascript?

Làm cách nào để tải lên một tệp bằng formdata?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội