Lấy dữ liệu biểu mẫu nodejs

Dữ liệu nội dung yêu cầu sẽ được đặt vào 

{"product": "1", "quantity": "9", "shipping": "express", "tos": true}

7. Một vài ví dụ để giải mã các định dạng dữ liệu yêu cầu phổ biến

  • {"product": "1", "quantity": "9", "shipping": "express", "tos": true}

    8
  • {"product": "1", "quantity": "9", "shipping": "express", "tos": true}

    9
  • <form id="productForm">

      ...

      <label>Product:</label>

      <select name="product">

        <option value="1" selected>T-shirt</option>

        <option value="2">Hat</option>

        <option value="3">Shoes</option>

      </select>

     

      <label>Quantity:</label>

      <input type="number" name="quantity" min="0" step="1" value="9">

     

      <label>Express shipping</label>

      <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

      <div class="radios">

        <label><input type="radio" name="shipping" value="express" checked> Yes</label>

        <label><input type="radio" name="shipping" value="regular"> No</label>

      </div>

     

      <label>Terms of Service:</label>

      <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

      <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

      ...

    </form>

    0

URL biểu mẫu được mã hóa

{"product": "1", "quantity": "9", "shipping": "express", "tos": true}

8 là định dạng dữ liệu mặc định để gửi biểu mẫu

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

2

sử dụng nhanh. phần mềm trung gian được mã hóa urlen

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

3

Chạy mã này và mở máy chủ cục bộ. 3000

Lấy dữ liệu biểu mẫu nodejs

Điền vào mẫu và gửi. Bạn sẽ thấy phản hồi

Lấy dữ liệu biểu mẫu nodejs

JSON

{"product": "1", "quantity": "9", "shipping": "express", "tos": true}

9 chủ yếu được sử dụng cho các yêu cầu AJAX (XMLHttpRequest)

sử dụng nhanh. json

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

5

Chạy mã này, mở localhost. 3000 và chuyển đổi bảng điều khiển web

Lấy dữ liệu biểu mẫu nodejs

Điền vào mẫu và gửi nó. Trong bảng điều khiển, bạn sẽ thấy phản hồi của máy chủ với dữ liệu bạn đã gửi

Lấy dữ liệu biểu mẫu nodejs

Dữ liệu biểu mẫu

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

0 được sử dụng để gửi tệp hoặc đối tượng dữ liệu biểu mẫu

Express theo mặc định không có khả năng phân tích loại mã hóa này. Vì vậy, bạn có thể sử dụng phần mềm trung gian của nhiều người

Ví dụ: thử phần mềm trung gian

{"product": "1", "quantity": "9", "shipping": "express", "tos": true}

80 để giải mã dạng nhiều phần chỉ có văn bản

{"product": "1", "quantity": "9", "shipping": "express", "tos": true}

81

Trang ví dụ trông giống như trang đầu tiên

Chạy mã này và mở máy chủ cục bộ. 3000

Lấy dữ liệu biểu mẫu nodejs

Điền vào mẫu và gửi. Bạn sẽ thấy phản hồi

Lấy dữ liệu biểu mẫu nodejs

Đối với các tệp tải lên, bạn đọc phần «Cách sử dụng» trong tài liệu của multer. Dữ liệu tệp sẽ là nơi để

{"product": "1", "quantity": "9", "shipping": "express", "tos": true}

82

Dữ liệu được truy xuất ở định dạng tương tự như các tham số yêu cầu sẽ được gửi nếu biểu mẫu được gửi, vì vậy mô-đun này phù hợp để trích xuất dữ liệu biểu mẫu ở phía máy khách cho các dự án triển khai xử lý đẳng cấu của việc gửi biểu mẫu

Cài đặt

npm install get-form-data

Khu vực gói trình duyệt có sẵn, xuất hàm

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

2 toàn cầu

  • get-form-data. js (phiên bản phát triển)
  • get-form-data. tối thiểu. js (phiên bản sản xuất nén)

Cách sử dụng

Lấy dữ liệu biểu mẫu

Để lấy dữ liệu cho toàn bộ biểu mẫu, hãy sử dụng hàm

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

3

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

let form = document.querySelector('#productForm')

 

let data = getFormData(form)

 

console.log(JSON.stringify(data))

{"product": "1", "quantity": "9", "shipping": "express", "tos": true}

Lấy dữ liệu trường

Để lấy dữ liệu cho các trường biểu mẫu riêng lẻ (có thể chứa nhiều đầu vào biểu mẫu có cùng tên), hãy sử dụng hàm

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

4, được hiển thị dưới dạng thuộc tính của

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

2

________số 8

let form = document.querySelector('#tshirtForm')

 

let sizes = getFormData.getFieldData(form, 'sizes')

 

console.log(JSON.stringify(sizes))

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

0

Cắt đầu vào của người dùng

Để cắt đầu vào của người dùng, hãy chuyển tùy chọn

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

6 thành

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

3 hoặc

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

4

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

4

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

5

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

6

Bao gồm đầu vào bị vô hiệu hóa

Đầu vào bị vô hiệu hóa được bỏ qua theo mặc định;

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

0

Đầu vào tệp

Nếu có thể, dữ liệu được trích xuất từ ​​

let form = document.querySelector('#productForm')

 

let data = getFormData(form)

 

console.log(JSON.stringify(data))

2 sẽ là đối tượng

let form = document.querySelector('#productForm')

 

let data = getFormData(form)

 

console.log(JSON.stringify(data))

3 gốc

Nếu thuộc tính

let form = document.querySelector('#productForm')

 

let data = getFormData(form)

 

console.log(JSON.stringify(data))

4 không có sẵn, thuộc tính

let form = document.querySelector('#productForm')

 

let data = getFormData(form)

 

console.log(JSON.stringify(data))

5 sẽ được sử dụng để cung cấp dữ liệu thay thế

API

let form = document.querySelector('#productForm') let data = getFormData(form) console.log(JSON.stringify(data))6

Trích xuất dữ liệu từ bộ sưu tập

let form = document.querySelector('#productForm')

 

let data = getFormData(form)

 

console.log(JSON.stringify(data))

8 của

let form = document.querySelector('#productForm')

 

let data = getFormData(form)

 

console.log(JSON.stringify(data))

7 - để sử dụng

let form = document.querySelector('#productForm')

 

let data = getFormData(form)

 

console.log(JSON.stringify(data))

8, đầu vào biểu mẫu phải có thuộc tính

{"product": "1", "quantity": "9", "shipping": "express", "tos": true}

0 hoặc

{"product": "1", "quantity": "9", "shipping": "express", "tos": true}

1. Vì nhiều đầu vào không thể có cùng một

{"product": "1", "quantity": "9", "shipping": "express", "tos": true}

1 và một

{"product": "1", "quantity": "9", "shipping": "express", "tos": true}

0 cho phép một đầu vào đủ điều kiện là một điều khiển thành công để gửi biểu mẫu, các thuộc tính

{"product": "1", "quantity": "9", "shipping": "express", "tos": true}

0 được ưu tiên hơn và sẽ được ưu tiên nếu có cả hai

Các tùy chọn sau có thể được cấu hình

  • {"product": "1", "quantity": "9", "shipping": "express", "tos": true}

    5 (mặc định.

    {"product": "1", "quantity": "9", "shipping": "express", "tos": true}

    6) - nếu

    {"product": "1", "quantity": "9", "shipping": "express", "tos": true}

    7, khoảng trắng ở đầu và cuối sẽ bị cắt khỏi đầu vào của người dùng trong đầu vào biểu mẫu nhập văn bản
  • {"product": "1", "quantity": "9", "shipping": "express", "tos": true}

    8 (mặc định.

    {"product": "1", "quantity": "9", "shipping": "express", "tos": true}

    6) - nếu

    {"product": "1", "quantity": "9", "shipping": "express", "tos": true}

    7, đầu vào bị vô hiệu hóa sẽ không bị bỏ qua

loại trả lại.

<form id="tshirtForm">

  ...

  <label>Sizes:</label>

  <div class="checkboxes">

    <label><input type="checkbox" name="sizes" value="S"> S</label>

    <label><input type="checkbox" name="sizes" value="M" checked> M</label>

    <label><input type="checkbox" name="sizes" value="L" checked> L</label>

  </div>

  ...

</form>

1

Các thuộc tính trong đối tượng dữ liệu được trả về hầu hết phù hợp với những gì sẽ được gửi dưới dạng tham số yêu cầu nếu biểu mẫu đã được gửi

  • Đầu vào bị vô hiệu hóa được bỏ qua theo mặc định
  • Các kiểu nhập văn bản sẽ luôn đóng góp một giá trị, giá trị này sẽ là

    <form id="tshirtForm">

      ...

      <label>Sizes:</label>

      <div class="checkboxes">

        <label><input type="checkbox" name="sizes" value="S"> S</label>

        <label><input type="checkbox" name="sizes" value="M" checked> M</label>

        <label><input type="checkbox" name="sizes" value="L" checked> L</label>

      </div>

      ...

    </form>

    2 nếu chúng trống
  • Đầu vào hộp kiểm sẽ chỉ đóng góp một giá trị nếu chúng được chọn, trong trường hợp đó, thuộc tính

    <form id="tshirtForm">

      ...

      <label>Sizes:</label>

      <div class="checkboxes">

        <label><input type="checkbox" name="sizes" value="S"> S</label>

        <label><input type="checkbox" name="sizes" value="M" checked> M</label>

        <label><input type="checkbox" name="sizes" value="L" checked> L</label>

      </div>

      ...

    </form>

    3 của chúng sẽ được sử dụng
  • Các phần tử biểu mẫu đại diện cho nhiều giá trị (chọn nhiều hoặc nhiều đầu vào có cùng tên, đầu vào tệp có

    <form id="tshirtForm">

      ...

      <label>Sizes:</label>

      <div class="checkboxes">

        <label><input type="checkbox" name="sizes" value="S"> S</label>

        <label><input type="checkbox" name="sizes" value="M" checked> M</label>

        <label><input type="checkbox" name="sizes" value="L" checked> L</label>

      </div>

      ...

    </form>

    4) sẽ chỉ đóng góp một giá trị nếu chúng có ít nhất một giá trị để gửi. Giá trị của chúng sẽ luôn được giữ trong một

    <form id="tshirtForm">

      ...

      <label>Sizes:</label>

      <div class="checkboxes">

        <label><input type="checkbox" name="sizes" value="S"> S</label>

        <label><input type="checkbox" name="sizes" value="M" checked> M</label>

        <label><input type="checkbox" name="sizes" value="L" checked> L</label>

      </div>

      ...

    </form>

    5, ngay cả khi chỉ có một

Ngoại lệ cho điều này là

  • Nếu hộp kiểm được chọn không có thuộc tính

    <form id="tshirtForm">

      ...

      <label>Sizes:</label>

      <div class="checkboxes">

        <label><input type="checkbox" name="sizes" value="S"> S</label>

        <label><input type="checkbox" name="sizes" value="M" checked> M</label>

        <label><input type="checkbox" name="sizes" value="L" checked> L</label>

      </div>

      ...

    </form>

    3, giá trị của nó sẽ là

    {"product": "1", "quantity": "9", "shipping": "express", "tos": true}

    7. Thông thường, nó sẽ mặc định là

    <form id="tshirtForm">

      ...

      <label>Sizes:</label>

      <div class="checkboxes">

        <label><input type="checkbox" name="sizes" value="S"> S</label>

        <label><input type="checkbox" name="sizes" value="M" checked> M</label>

        <label><input type="checkbox" name="sizes" value="L" checked> L</label>

      </div>

      ...

    </form>

    8 khi được gửi, nhưng điều này không hữu ích bằng mặc định trên máy khách
  • Các nút hoàn toàn bị bỏ qua vì chỉ có thể xác định nút nào được tính là thành công sau khi được sử dụng để gửi biểu mẫu

<form id="tshirtForm">  ...  <label>Sizes:</label>  <div class="checkboxes">    <label><input type="checkbox" name="sizes" value="S"> S</label>    <label><input type="checkbox" name="sizes" value="M" checked> M</label>    <label><input type="checkbox" name="sizes" value="L" checked> L</label>  </div>  ...</form>9

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

4 là bản xuất có tên khi sử dụng các mô-đun ES, nếu không, nó cũng có sẵn dưới dạng

let form = document.querySelector('#tshirtForm')

 

let sizes = getFormData.getFieldData(form, 'sizes')

 

console.log(JSON.stringify(sizes))

1

Trích xuất dữ liệu cho trường được đặt tên từ bộ sưu tập

let form = document.querySelector('#productForm')

 

let data = getFormData(form)

 

console.log(JSON.stringify(data))

8 của

let form = document.querySelector('#productForm')

 

let data = getFormData(form)

 

console.log(JSON.stringify(data))

7

Các tùy chọn như được ghi lại cho

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

2

loại trả lại.

let form = document.querySelector('#tshirtForm')

 

let sizes = getFormData.getFieldData(form, 'sizes')

 

console.log(JSON.stringify(sizes))

5

Hàm này được sử dụng bởi

<form id="productForm">

  ...

  <label>Product:</label>

  <select name="product">

    <option value="1" selected>T-shirt</option>

    <option value="2">Hat</option>

    <option value="3">Shoes</option>

  </select>

 

  <label>Quantity:</label>

  <input type="number" name="quantity" min="0" step="1" value="9">

 

  <label>Express shipping</label>

  <p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>

  <div class="radios">

    <label><input type="radio" name="shipping" value="express" checked> Yes</label>

    <label><input type="radio" name="shipping" value="regular"> No</label>

  </div>

 

  <label>Terms of Service:</label>

  <p>I have read and agree to the <a href="/">Terms of Service</a>.</p>

  <label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>

  ...

</form>

3, vì vậy tài liệu về các giá trị trả về riêng lẻ ở trên cũng được áp dụng

let form = document.querySelector('#tshirtForm')

 

let sizes = getFormData.getFieldData(form, 'sizes')

 

console.log(JSON.stringify(sizes))

7 sẽ được trả lại nếu trường không tồn tại, bị vô hiệu hóa hoặc không đóng góp giá trị (e. g. các hộp kiểm không được chọn, nhiều lựa chọn không có lựa chọn nào, đầu vào tệp không có lựa chọn nào)

Dữ liệu biểu mẫu trong nút js là gì?

Một thư viện để tạo luồng "nhiều phần/biểu mẫu dữ liệu" có thể đọc được .

Bạn sẽ lấy dữ liệu POST trong Nodejs như thế nào?

Dữ liệu bài đăng được cung cấp cho chúng tôi trên đối tượng req bên trong chức năng gọi lại của ứng dụng. phương thức post() . Chúng tôi có thể truy cập dữ liệu được gửi dưới dạng nội dung bằng cú pháp được đề cập bên dưới.

Làm thế nào để nút js xử lý dữ liệu biểu mẫu nhiều phần?

post('/', function(req, res, next){ // connect-form thêm req. đối tượng biểu mẫu // chúng ta có thể (tùy chọn) xác định onComplete, chuyển // trường ngoại lệ (nếu có) được phân tích cú pháp và các tệp được phân tích cú pháp req. hình thức. hoàn thành (hàm (err, trường, tệp) { if (err) { next (err); } other { console

Trình phân tích cú pháp nội dung trong Nodejs là gì?

Trình phân tích cú pháp nội dung là Nút. phần mềm trung gian phân tích nội dung js . Nó chịu trách nhiệm phân tích cú pháp các nội dung yêu cầu đến trong phần mềm trung gian trước khi bạn xử lý nó. Cài đặt mô-đun phân tích cú pháp cơ thể. Bạn có thể truy cập liên kết để Cài đặt mô-đun body-parser.