Bạn có thể chuyển đổi html sang json không?

HTML Table To JSON Converter cho phép bạn chuyển đổi Bảng HTML sang JSON trực tuyến. Chọn một tệp HTML hoặc Tải HTML từ một url hoặc Nhập dữ liệu Bảng HTML và chuyển đổi nó thành JSON. Sau khi chuyển đổi, bạn có thể làm đẹp JSON và tải dữ liệu JSON đã chuyển đổi về thiết bị của mình

Khi gọi hàm

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

87, bạn có thể chọn không lấy các giá trị văn bản từ html bằng cách chuyển vào đối số từ khóa

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

88. Bạn cũng có thể chọn không nắm bắt các thuộc tính của các phần tử bằng cách chuyển

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

89 vào hàm

Ví dụ

đầu vào ví dụ

    Floyd Hightower's Projects
    
    
    

đầu ra ví dụ

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

Bảng HTML sang JSON

Ngoài việc chuyển đổi HTML sang JSON, thư viện này còn có thể chuyển đổi các bảng HTML sang JSON một cách thông minh

Hiện tại, thư viện này có thể xử lý ba loại bảng

A. Những người có tiêu đề bảng trong hàng đầu tiên B. Những người có tiêu đề bảng trong cột đầu tiên C. Những người không có tiêu đề bảng

Nhận các giá trị biểu mẫu dưới dạng đối tượng JSON có thể hơi khó hiểu, nhưng có một tin tốt. Các trình duyệt đã triển khai API tích hợp để nhận các giá trị biểu mẫu giúp điều này trở nên đơn giản và dễ tiếp cận

Sử dụng API FormData để truy cập các giá trị biểu mẫu trong JavaScript

Trước khi tôi biết về API FormData, tôi nghĩ việc truy cập các giá trị biểu mẫu trong JavaScript là một điều khó khăn. Nhưng sau khi Suz Hinton cho tôi biết, tất cả đã thay đổi

Tóm lại, API FormData cho phép chúng tôi truy cập bất kỳ giá trị trường nào trong biểu mẫu đã gửi bằng API đơn giản

Ví dụ nhanh, giả sử chúng ta có biểu mẫu này

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

Để xử lý các lần gửi trong JavaScript, chúng tôi có thể sử dụng API FormData như thế này

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

Nếu chúng tôi chạy mã này và gửi biểu mẫu, giá trị chúng tôi nhập vào đầu vào email sẽ được ghi lại. Tôi không biết bạn thế nào, nhưng lần đầu tiên tôi thử điều này, tôi đã khóc vì hạnh phúc — điều này đơn giản hơn nhiều so với những gì tôi đã từng làm. (Cách tiếp cận phức tạp hơn trước đây của tôi vẫn ở cuối bài viết này nếu bạn muốn so sánh. )

Cách lấy tất cả các giá trị từ biểu mẫu dưới dạng đối tượng JSON bằng API FormData

Nếu chúng tôi muốn nhận tất cả các giá trị từ một biểu mẫu, thì có thêm một bước. Hãy mở rộng biểu mẫu của chúng tôi với một trường tên

  

+   Name
+   
+
    Email
    

    Submit
  

  function handleSubmit(event) {
    event.preventDefault();

    const data = new FormData(event.target);

+   const value = Object.fromEntries(data.entries());

    console.log({ value });
  }

  const form = document.querySelector('form');
  form.addEventListener('submit', handleSubmit);

API FormData không trực tiếp chuyển đổi các giá trị biểu mẫu thành JSON, nhưng chúng ta có thể chuyển đổi ở đó bằng cách sử dụng phương thức

  function handleSubmit(event) {
    event.preventDefault();

    const data = new FormData(event.target);

+   const value = Object.fromEntries(data.entries());

    console.log({ value });
  }

  const form = document.querySelector('form');
  form.addEventListener('submit', handleSubmit);

6 và chuyển giá trị trả về của nó cho

  function handleSubmit(event) {
    event.preventDefault();

    const data = new FormData(event.target);

+   const value = Object.fromEntries(data.entries());

    console.log({ value });
  }

  const form = document.querySelector('form');
  form.addEventListener('submit', handleSubmit);

7, phương thức này trả về một đối tượng JavaScript đơn giản

Điều này tương thích với

  function handleSubmit(event) {
    event.preventDefault();

    const data = new FormData(event.target);

+   const value = Object.fromEntries(data.entries());

    console.log({ value });
  }

  const form = document.querySelector('form');
  form.addEventListener('submit', handleSubmit);

8, vì vậy chúng tôi có thể sử dụng nó để gửi dữ liệu được mã hóa JSON tới API hoặc bất kỳ điều gì khác mà chúng tôi có thể muốn thực hiện với một đối tượng JavaScript

Nhận các giá trị đa lựa chọn như hộp kiểm dưới dạng JSON với API FormData

Cách tiếp cận

  function handleSubmit(event) {
    event.preventDefault();

    const data = new FormData(event.target);

+   const value = Object.fromEntries(data.entries());

    console.log({ value });
  }

  const form = document.querySelector('form');
  form.addEventListener('submit', handleSubmit);

9 trong phần trước hoạt động hiệu quả đối với hầu hết các đầu vào biểu mẫu, nhưng nếu đầu vào cho phép nhiều giá trị — chẳng hạn như hộp kiểm — thì chúng ta sẽ chỉ thấy một giá trị trong đối tượng kết quả

May mắn thay, giải pháp cho vấn đề này chỉ yêu cầu thêm một dòng JavaScript cho mỗi đầu vào đa giá trị

Hãy thêm một trường có nhiều giá trị tiềm năng vào biểu mẫu của chúng ta

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

0

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

1

Bây giờ đối tượng chứa một mảng trong

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

00 chứa tất cả các giá trị đã kiểm tra

Một ví dụ đầy đủ về nhiều loại đầu vào với API FormData

Để biết ví dụ đầy đủ về cách sử dụng API FormData với nhiều loại đầu vào khác nhau, hãy xem CodePen này (các giá trị biểu mẫu được in bên dưới biểu mẫu khi gửi)

xem trên CodePen

Đứng lên. Phiên bản gốc của bài viết này đã sử dụng cách tiếp cận thủ công hơn để nhận các giá trị biểu mẫu. API FormData khiến điều này phần lớn trở nên lỗi thời, nhưng tôi đã đưa vào bài viết gốc bên dưới để bạn có thể thấy phương pháp này đã phát triển như thế nào

Nội dung bài báo gốc

Việc sử dụng AJAX thực sự phổ biến, nhưng vẫn rất khó để lấy các giá trị ra khỏi biểu mẫu mà không sử dụng thư viện

Và đó là bởi vì có vẻ khá đáng sợ khi thiết lập tất cả các vòng lặp và kiểm tra cần thiết để xử lý việc phân tích một biểu mẫu và tất cả các phần tử con của nó. Bạn tham gia vào các cuộc thảo luận nặng nề về việc liệu bạn nên sử dụng

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

01,

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

02,

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

03 hay

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

04 và sau khi cố gắng theo kịp các lý do khác nhau về hiệu suất, ngữ nghĩa và phong cách để đưa ra những lựa chọn đó, não của bạn bắt đầu hóa lỏng và chảy ra ngoài tai bạn. . ”

Nhưng đối với các trang web đơn giản không cần nhiều ngoài việc lấy dữ liệu biểu mẫu làm đối tượng để sử dụng với JSON, jQuery (hoặc bất kỳ thư viện hoặc khung lớn nào) bao gồm rất nhiều chi phí cho chỉ một hoặc hai chức năng mà bạn sẽ sử dụng

(Ngay cả khi đó không phải là thứ chúng tôi từng sử dụng trong sản xuất, thì việc viết các tập lệnh tiện ích của riêng chúng tôi là một cách tuyệt vời để nâng cao hiểu biết của chúng tôi về cách mọi thứ hoạt động. Nếu chúng ta phụ thuộc quá nhiều vào “phép thuật” của một công cụ để làm cho các ứng dụng của chúng ta hoạt động, thì việc gỡ lỗi chúng sẽ trở nên thực sự khó khăn khi chúng ta tìm thấy sự cố nằm ngoài phạm vi của công cụ. )

Vì vậy, trong hướng dẫn này, chúng ta sẽ viết tập lệnh của riêng mình — bằng JavaScript đơn giản — để kéo các giá trị của các trường của biểu mẫu vào một đối tượng, sau đó chúng ta có thể sử dụng đối tượng này cho AJAX, cập nhật thông tin trên các phần khác của trang và bất kỳ thứ gì khác

Những gì chúng ta sẽ xây dựng

Vào cuối hướng dẫn này, chúng tôi sẽ tạo biểu mẫu được hiển thị trong bút này

Nếu bạn điền vào biểu mẫu và nhấn nút “Gửi. ”, dữ liệu biểu mẫu sẽ được xuất dưới dạng JSON trong phần “Dữ liệu biểu mẫu” bên dưới

GHI CHÚ. Để hiển thị rằng đầu vào

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

05 sẽ được bao gồm, đầu vào có tên là

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

06 đã được bao gồm trong biểu mẫu này. Giá trị của nó là một GUID ngẫu nhiên

Trước khi chúng ta bắt đầu. Mục tiêu và Kế hoạch

Để đỡ phải đau đầu và đau tim, chúng ta sẽ bắt đầu dự án của mình với một kế hoạch rõ ràng. Điều này sẽ giữ cho các mục tiêu của chúng ta rõ ràng và giúp xác định cấu trúc cũng như mục đích của mã trước khi chúng ta viết một dòng.

Bắt đầu với một mục tiêu. chúng ta nên kết thúc với cái gì?

Trước khi chúng tôi viết bất kỳ JavaScript nào, hãy bắt đầu bằng cách quyết định xem chúng tôi muốn đầu ra trông như thế nào

Nếu tôi đã điền đầy đủ vào biểu mẫu trên, chúng tôi muốn đối tượng kết quả trông như thế này

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

9

Thuộc tính

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

07 của mỗi trường được sử dụng làm khóa của đối tượng và

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

08 của trường được đặt làm giá trị của đối tượng

Điều này là lý tưởng, bởi vì nó có nghĩa là chúng ta có thể làm điều gì đó như thế này

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

2

Điều này đơn giản, dễ đọc đối với con người và cũng dễ dàng gửi tới các API chấp nhận dữ liệu

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

09 trong các yêu cầu (hầu hết trong số đó ngày nay)

Vì vậy, hãy cố gắng vì điều đó

Lên kế hoạch. làm cách nào chúng tôi có thể chuyển đổi các trường biểu mẫu thành JSON?

Khi chúng tôi hoàn thành, JavaScript của chúng tôi sẽ hoàn thành các mục tiêu sau

1. Nắm bắt sự kiện

   {
       "head": [
       {
           "title": [
           {
               "_value": "Floyd Hightower's Projects"
           }],
           "meta": [
           {
               "_attributes":
               {
                   "charset": "UTF-8"
               }
           },
           {
               "_attributes":
               {
                   "name": "description",
                   "content": "Floyd Hightower's Projects"
               }
           },
           {
               "_attributes":
               {
                   "name": "keywords",
                   "content": "projects,fhightower,Floyd,Hightower"
               }
           }]
       }]
   }
   

   10 của biểu mẫu và ngăn việc gửi mặc định
2. Chuyển đổi các phần tử con của biểu mẫu thành JSON
3. Kiểm tra để đảm bảo chỉ các phần tử trường biểu mẫu được thêm vào đối tượng
4. Thêm biện pháp bảo vệ để chỉ lưu trữ các trường có thể kiểm tra nếu thuộc tính

   {
       "head": [
       {
           "title": [
           {
               "_value": "Floyd Hightower's Projects"
           }],
           "meta": [
           {
               "_attributes":
               {
                   "charset": "UTF-8"
               }
           },
           {
               "_attributes":
               {
                   "name": "description",
                   "content": "Floyd Hightower's Projects"
               }
           },
           {
               "_attributes":
               {
                   "name": "keywords",
                   "content": "projects,fhightower,Floyd,Hightower"
               }
           }]
       }]
   }
   

   11 được đặt
5. Xử lý đầu vào cho phép nhiều giá trị, như hộp kiểm

Sẵn sàng để uốn cong bộ não lớn của bạn?

Bắt đầu. Tạo một biểu mẫu để kiểm tra

Để tránh rắc rối khi thiết lập công cụ giao diện người dùng (chúng tôi đang sử dụng Babel để phiên mã các tính năng mới hơn của JavaScript, chẳng hạn như các hàm mũi tên béo), chúng tôi sẽ thực hiện dự án này trên Codepen

Để bắt đầu, hãy tạo một nhánh của cây bút này, chứa đánh dấu biểu mẫu với các đầu vào phổ biến và một số kiểu để làm cho nó hiển thị đẹp mắt

GHI CHÚ. Phần đánh dấu được viết bằng Jade (gần đây đã được đổi tên thành Pug) vì tôi thấy nó nhanh hơn và dễ đọc hơn. Nếu bạn thích xem HTML đơn giản, bạn có thể nhấn vào nút “xem đã biên dịch” ở dưới cùng bên phải của ngăn Ngọc trong bút ở trên

GHI CHÚ. Các kiểu cho biểu mẫu sử dụng các quy ước đặt tên kiểu BEM và tôi đang sử dụng PostCSS để giúp dễ dàng nhóm các kiểu của mình lại với nhau mà không thực sự tạo CSS lồng nhau. Đối với tôi, cách này dễ đọc hơn nhiều so với các cách viết CSS khác, nhưng nếu bạn thích CSS thông thường hơn, hãy nhấp vào nút “xem đã biên dịch” ở dưới cùng bên phải của ngăn PostCSS trong bút ở trên

Bước 1. Thêm Người nghe vào Sự kiện { "head": [ { "title": [ { "_value": "Floyd Hightower's Projects" }], "meta": [ { "_attributes": { "charset": "UTF-8" } }, { "_attributes": { "name": "description", "content": "Floyd Hightower's Projects" } }, { "_attributes": { "name": "keywords", "content": "projects,fhightower,Floyd,Hightower" } }] }] } 10 cho Biểu mẫu

Trước khi chúng tôi làm bất cứ điều gì khác, chúng tôi cần lắng nghe sự kiện

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

10 trên biểu mẫu của mình và ngăn không cho nó thực hiện công việc bình thường

Để làm điều này, hãy tạo một hàm có tên là

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

14, sau đó sử dụng

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

15 để tìm biểu mẫu của chúng ta và đính kèm hàm vào sự kiện

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

10 của biểu mẫu

Tạo một hàm

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

14

Hiện tại, chức năng này sẽ không làm được gì nhiều. Để bắt đầu, chúng tôi sẽ ngăn chặn hành động mặc định của

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

10, tạo một biến có tên là

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

19 để lưu trữ đầu ra (mà chúng tôi sẽ xây dựng trong giây lát), sau đó tìm vùng chứa đầu ra của chúng tôi và in ra biến

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

19 dưới dạng JSON

Để ngăn hành động mặc định, hàm này cần chấp nhận một đối số.

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

91 được tạo khi người dùng nhấp vào nút gửi trên biểu mẫu. Chúng tôi có thể ngăn biểu mẫu gửi theo cách thông thường (kích hoạt trình duyệt chuyển sang nơi khác) bằng cách sử dụng

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

92

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

7

GHI CHÚ. Biến

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

19 chưa phải là JSON. Điều này thoạt đầu hơi khó hiểu, nhưng đó là vấn đề về sắc thái. Thông thường, một hàm chuyển đổi “sang JSON” thực sự là chuyển đổi thành một đối tượng theo nghĩa đen. Điều này cho phép chúng tôi truy cập dữ liệu bằng JavaScript. Để chuyển đổi dữ liệu đó thành chuỗi JSON hợp lệ, chúng ta cần sử dụng

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

94

Đính kèm một trình lắng nghe sự kiện vào biểu mẫu

Với trình xử lý sự kiện được tạo, chúng tôi cần thêm một trình xử lý vào biểu mẫu để chúng tôi thực sự có thể xử lý sự kiện

Để làm điều này, chúng tôi sử dụng

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

15 để nhắm mục tiêu biểu mẫu, sau đó lưu trữ mục đầu tiên trong bộ sưu tập kết quả dưới dạng

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

96

Tiếp theo, sử dụng

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

97, chúng tôi nối

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

14 với sự kiện

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

10, sự kiện này sẽ cho phép sự kiện chạy bất cứ khi nào người dùng nhấp để gửi biểu mẫu

  

+   Name
+   
+
    Email
    

    Submit
  

5

Tại thời điểm này, chúng tôi có thể kiểm tra xem mọi thứ có hoạt động bình thường không bằng cách nhấp vào nút “Gửi. nút ” trên biểu mẫu. Chúng ta sẽ thấy

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

20 trong hộp đầu ra “Dữ liệu biểu mẫu”

Bước 2. Trích xuất các giá trị của các trường biểu mẫu dưới dạng JSON

Tiếp theo, chúng ta cần thực sự lấy các giá trị từ các trường biểu mẫu

Để làm điều này, chúng tôi sẽ sử dụng thứ gì đó - lúc đầu - có thể trông đáng sợ như cứt.

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

21 kết hợp với

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

22

Chúng ta sẽ đi sâu vào những chi tiết bẩn thỉu về những gì

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

21 thực sự đang làm trong phần tiếp theo, nhưng bây giờ hãy tập trung vào cách chúng ta thực sự sử dụng nó

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

0

Tôi biết. Tôi biết. Nó trông có lông. Nhưng hãy đào sâu và xem điều này đang làm gì

Đầu tiên, hãy chia cái này thành các bộ phận cấu thành của nó

1. Chúng tôi có một chức năng được gọi là

   <form>
     <label for="email">Emaillabel>
     <input type="email" name="email" id="email" />
   
     <button type="submit">Submitbutton>
   form>

   24, chấp nhận một đối số.

   {
       "head": [
       {
           "title": [
           {
               "_value": "Floyd Hightower's Projects"
           }],
           "meta": [
           {
               "_attributes":
               {
                   "charset": "UTF-8"
               }
           },
           {
               "_attributes":
               {
                   "name": "description",
                   "content": "Floyd Hightower's Projects"
               }
           },
           {
               "_attributes":
               {
                   "name": "keywords",
                   "content": "projects,fhightower,Floyd,Hightower"
               }
           }]
       }]
   }
   

   96
2. Bên trong hàm đó, chúng tôi trả về giá trị của

   <form>
     <label for="email">Emaillabel>
     <input type="email" name="email" id="email" />
   
     <button type="submit">Submitbutton>
   form>

   26, chấp nhận ba đối số. một biểu mẫu, một chức năng và một đối tượng trống theo nghĩa đen (_______220)
3. Đối số hàm chấp nhận các đối số

   {
       "head": [
       {
           "title": [
           {
               "_value": "Floyd Hightower's Projects"
           }],
           "meta": [
           {
               "_attributes":
               {
                   "charset": "UTF-8"
               }
           },
           {
               "_attributes":
               {
                   "name": "description",
                   "content": "Floyd Hightower's Projects"
               }
           },
           {
               "_attributes":
               {
                   "name": "keywords",
                   "content": "projects,fhightower,Floyd,Hightower"
               }
           }]
       }]
   }
   

   19 và

   <form>
     <label for="email">Emaillabel>
     <input type="email" name="email" id="email" />
   
     <button type="submit">Submitbutton>
   form>

   29, đồng thời thêm một thuộc tính mới với khóa là

   function handleSubmit(event) {
     event.preventDefault();
   
     const data = new FormData(event.target);
   
     const value = data.get('email');
   
     console.log({ value });
   }
   
   const form = document.querySelector('form');
   form.addEventListener('submit', handleSubmit);

   70 và giá trị

   function handleSubmit(event) {
     event.preventDefault();
   
     const data = new FormData(event.target);
   
     const value = data.get('email');
   
     console.log({ value });
   }
   
   const form = document.querySelector('form');
   form.addEventListener('submit', handleSubmit);

   71, cuối cùng trả về đối tượng

   {
       "head": [
       {
           "title": [
           {
               "_value": "Floyd Hightower's Projects"
           }],
           "meta": [
           {
               "_attributes":
               {
                   "charset": "UTF-8"
               }
           },
           {
               "_attributes":
               {
                   "name": "description",
                   "content": "Floyd Hightower's Projects"
               }
           },
           {
               "_attributes":
               {
                   "name": "keywords",
                   "content": "projects,fhightower,Floyd,Hightower"
               }
           }]
       }]
   }
   

   19

Sau khi chúng tôi đã thêm mã đó vào bút của mình, chúng tôi cần gọi hàm từ

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

14. Tìm

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

74 bên trong hàm và thay thế nó bằng

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

75

Bây giờ chúng ta có thể chạy nó bằng cách nhấp vào nút “Send It. nút ” bây giờ sẽ xuất cái này

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

1

Có một số vấn đề ở đây — ví dụ: cả “Ms. ” cũng không phải “Cake” đã thực sự được chọn trên biểu mẫu và có một mục trống ở dưới cùng (là nút của chúng tôi) — nhưng điều này không quá tệ cho bước đầu tiên

Vì vậy, làm thế nào mà điều đó chỉ xảy ra?

GHI CHÚ. Sử dụng

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

76, chúng tôi có quyền truy cập khá tốt vào biểu mẫu. Ví dụ: chúng tôi có thể nhận email bằng cách sử dụng

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

77. Tuy nhiên, nếu chúng ta cần chuyển đổi nó thành JSON để sử dụng với AJAX, thì đó là một thảm họa do bao gồm các chỉ mục số, ID và tên. Bạn có thể thấy điều này cho chính mình bằng cách thêm

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

78 vào

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

14. Đó là lý do tại sao chúng tôi đang xây dựng chức năng của riêng mình thay vì chỉ sử dụng quyền truy cập tích hợp này

Bước 2. 1 — Hiểu cách hoạt động của

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

21

Lời giải thích đơn giản nhất cho

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

21 là đây

Phương thức

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

21 sử dụng một hàm để chuyển đổi một mảng thành một giá trị duy nhất

Phương pháp này là một phần của nguyên mẫu

  

+   Name
+   
+
    Email
    

    Submit
  

53, vì vậy nó có thể được áp dụng cho bất kỳ giá trị mảng nào

Phải mất hai đối số

1. Một chức năng giảm tốc, được yêu cầu
2. Một giá trị ban đầu, là tùy chọn (mặc định là

     
   
   +   Name
   +   
   +
       Email
       
   
       Submit
     

   54)

Hàm rút gọn được áp dụng cho từng phần tử của mảng. Hàm này chấp nhận bốn đối số

1. Giá trị được hàm rút gọn trả về khi nó chạy trên phần tử trước đó (hoặc giá trị ban đầu, nếu đây là phần tử đầu tiên)
2. Phần tử mảng hiện tại
3. Chỉ số mảng hiện tại
4. Toàn bộ mảng, trong trường hợp bộ giảm tốc cần tham chiếu đến nó

Đối với bộ giảm tốc của chúng tôi, chúng tôi chỉ cần hai đối số đầu tiên

Một ví dụ thực sự đơn giản về việc giảm một mảng

Giả sử chúng ta có một dãy số, đại diện cho doanh số bán hàng trong ngày

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

2

Chúng tôi cần xác định tổng doanh số bán hàng trong ngày, vì vậy chúng tôi thiết lập chức năng đơn giản này để cộng doanh số bán hàng

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

3

Sau đó, chúng tôi sử dụng

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

21 để áp dụng chức năng cho mảng bán hàng

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

4

TIỀN BOA. Bạn có thể chạy các ví dụ này trong bảng điều khiển của trình duyệt để tự mình xem kết quả

Bây giờ, nếu chúng ta muốn rút gọn đoạn mã này lại một chút, chúng ta có thể viết toàn bộ nội dung như thế này

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

5

Khi điều này được gọi,

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

21 bắt đầu với

  

+   Name
+   
+
    Email
    

    Submit
  

54 là giá trị của

  

+   Name
+   
+
    Email
    

    Submit
  

58 và lấy phần tử đầu tiên của mảng,

  

+   Name
+   
+
    Email
    

    Submit
  

59, là giá trị của

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

00. Nó thêm chúng lại với nhau và trả về chúng

Bây giờ

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

21 di chuyển đến phần tử thứ hai trong mảng,

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

02, và lần này giá trị của

  

+   Name
+   
+
    Email
    

    Submit
  

58 là giá trị được trả về lần trước.

  

+   Name
+   
+
    Email
    

    Submit
  

59

Quá trình này được lặp lại cho đến khi tất cả các yếu tố được cộng lại với nhau và chúng ta có tổng doanh số bán hàng trong ngày.

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

05

Bước 2. 2 — Giải cấu trúc hàm

Như hiện tại,

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

24 thực sự được tạo thành từ ba phần

1. Hàm rút gọn để kết hợp các phần tử biểu mẫu của chúng ta thành một đối tượng duy nhất
2. Giá trị ban đầu của

   <form>
     <label for="email">Emaillabel>
     <input type="email" name="email" id="email" />
   
     <button type="submit">Submitbutton>
   form>

   20 để giữ dữ liệu biểu mẫu của chúng tôi
3. Gọi tới

   <form>
     <label for="email">Emaillabel>
     <input type="email" name="email" id="email" />
   
     <button type="submit">Submitbutton>
   form>

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

   <form>
     <label for="email">Emaillabel>
     <input type="email" name="email" id="email" />
   
     <button type="submit">Submitbutton>
   form>

   22, cho phép chúng tôi buộc

   <form>
     <label for="email">Emaillabel>
     <input type="email" name="email" id="email" />
   
     <button type="submit">Submitbutton>
   form>

   21 hoạt động với

   function handleSubmit(event) {
     event.preventDefault();
   
     const data = new FormData(event.target);
   
     const value = data.get('email');
   
     console.log({ value });
   }
   
   const form = document.querySelector('form');
   form.addEventListener('submit', handleSubmit);

   11, mặc dù về mặt kỹ thuật, đây không phải là một mảng

GHI CHÚ. Các thành phần của biểu mẫu thực sự được gọi là

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

12, "giống như mảng", nghĩa là về cơ bản nó là một mảng, nhưng nó thiếu một số phương thức mảng và có một số thuộc tính và phương thức đặc biệt của riêng nó

Bước 2. 3 — Viết hàm rút gọn

Đầu tiên, chúng ta cần có hàm giảm tốc. Trong ví dụ đơn giản về giảm mảng, chúng tôi đã sử dụng các giá trị đơn lẻ, điều này sẽ không hoạt động trong trường hợp này. Thay vào đó, chúng tôi muốn thêm từng trường vào một đối tượng có định dạng như thế này

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

6

Vì vậy, chức năng giảm tốc của chúng tôi hoạt động như thế này

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

7

Đối tượng

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

19 là giá trị trước đó của bộ giảm tốc và

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

14 là phần tử biểu mẫu hiện tại trong mảng. Sau đó, chúng tôi thêm một thuộc tính mới vào đối tượng bằng cách sử dụng thuộc tính

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

07 của phần tử — đây là thuộc tính

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

07 của đầu vào trong HTML — và lưu trữ

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

08 của nó ở đó

Khi chúng tôi trả về ________ 119, chúng tôi cung cấp đối tượng được cập nhật cho lần gọi hàm tiếp theo, cho phép chúng tôi thêm từng trường vào đối tượng, từng trường một

Bước 2. 4 — Gọi bộ giảm tốc

Để làm cho nó rõ ràng hơn một chút về những gì đang xảy ra trong hàm

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

24, đây là cách nó trông như thế nào nếu chúng ta chia nhỏ nó thành nhiều mã dài dòng hơn

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

8

Trong ví dụ trên, chúng tôi thực hiện chính xác điều tương tự như trong

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

24, nhưng chúng tôi đã chia nhỏ nó thành các phần cấu thành của nó

Chúng tôi có thể thấy đầu ra nếu chúng tôi cập nhật

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

14 và thay đổi lệnh gọi thành

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

22 thành

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

23. Kiểm tra bảng điều khiển để xem đầu ra này

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

9

Ở đây chúng ta có thể thấy rằng bộ rút gọn được gọi cho mọi phần tử biểu mẫu và đối tượng phát triển với mỗi lần gọi tiếp theo cho đến khi chúng ta có một mục nhập cho mọi giá trị

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

07 trong biểu mẫu

Thay đổi

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

14 trở lại sử dụng

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

22 và hãy chuyển sang dọn dẹp đầu ra này để chỉ bao gồm các trường mà nó nên bao gồm

Bước 3. Thêm kiểm tra để đảm bảo chỉ những trường chúng tôi muốn được thu thập

Vấn đề đầu tiên chúng ta có thể thấy trong kết quả là các trường có cả thuộc tính

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

07 trống và

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

08 trống đã được thêm vào mảng. Đây không phải là những gì chúng tôi muốn trong trường hợp này, vì vậy chúng tôi cần thêm kiểm tra nhanh để xác minh rằng các trường có cả

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

07 và

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

08 trước khi chúng tôi thêm chúng

Bước 3. 1 — Tạo một hàm để kiểm tra các phần tử hợp lệ

Trước tiên, hãy thêm một chức năng mới vào bút của chúng ta có tên là

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

31. Hàm này sẽ chấp nhận một đối số —

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

14 — và trả về

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

33 hoặc

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

34

Để trả về

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

33, phần tử phải có

1. Thuộc tính

   {
       "head": [
       {
           "title": [
           {
               "_value": "Floyd Hightower's Projects"
           }],
           "meta": [
           {
               "_attributes":
               {
                   "charset": "UTF-8"
               }
           },
           {
               "_attributes":
               {
                   "name": "description",
                   "content": "Floyd Hightower's Projects"
               }
           },
           {
               "_attributes":
               {
                   "name": "keywords",
                   "content": "projects,fhightower,Floyd,Hightower"
               }
           }]
       }]
   }
   

   07 không trống
2. Thuộc tính

   {
       "head": [
       {
           "title": [
           {
               "_value": "Floyd Hightower's Projects"
           }],
           "meta": [
           {
               "_attributes":
               {
                   "charset": "UTF-8"
               }
           },
           {
               "_attributes":
               {
                   "name": "description",
                   "content": "Floyd Hightower's Projects"
               }
           },
           {
               "_attributes":
               {
                   "name": "keywords",
                   "content": "projects,fhightower,Floyd,Hightower"
               }
           }]
       }]
   }
   

   08 không trống

Thực hiện kiểm tra này như vậy

  

+   Name
+   
+
    Email
    

    Submit
  

0

Khá đơn giản, phải không?

Điều này cung cấp cho chúng tôi một cờ cho phép chúng tôi tránh việc thêm các phần tử không sử dụng (như nút) và các trường chưa điền (chẳng hạn như trường Email trống) vào đối tượng dữ liệu biểu mẫu

Bước 3. 2 — Thêm séc vào

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

24

Tiếp theo, chúng tôi cần thêm một kiểm tra

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

39 để biết liệu

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

14 của chúng tôi có hợp lệ trong

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

24 hay không. Vì chúng tôi không muốn thêm bất cứ thứ gì nếu phần tử không hợp lệ, chúng tôi chỉ cần làm như sau

  

+   Name
+   
+
    Email
    

    Submit
  

1

Bây giờ khi chúng tôi gửi biểu mẫu của mình, đầu ra sạch hơn nhiều

  

+   Name
+   
+
    Email
    

    Submit
  

2

Tuy nhiên, chúng tôi vẫn chưa ở đó. Trong bước tiếp theo, chúng tôi sẽ xử lý các yếu tố có thể kiểm tra như đầu vào radio và hộp kiểm

Bước 4. Chỉ lưu trữ các trường có thể kiểm tra nếu một trường ở trạng thái { "head": [ { "title": [ { "_value": "Floyd Hightower's Projects" }], "meta": [ { "_attributes": { "charset": "UTF-8" } }, { "_attributes": { "name": "description", "content": "Floyd Hightower's Projects" } }, { "_attributes": { "name": "keywords", "content": "projects,fhightower,Floyd,Hightower" } }] }] } 11

Bây giờ chúng ta cần một kiểm tra khác để xác định xem có nên thêm một phần tử vào mảng hay không. Chẳng hạn, ngay bây giờ trường

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

43 đang được lưu trữ với giá trị

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

44, mặc dù giá trị đó không được chọn trong biểu mẫu

Rõ ràng, đây là một tin xấu. Vì vậy, hãy sửa nó

Bước 4. 1 — Tạo một hàm để kiểm tra các phần tử có thể kiểm tra

Trước tiên, hãy thêm một chức năng mới để kiểm tra xem giá trị của một phần tử có được coi là hợp lệ để đưa vào đối tượng hay không

Tiêu chí của chúng tôi để xác định yếu tố “hợp lệ” là

1. Phần tử không phải là hộp kiểm hoặc đầu vào radio
2. Nếu phần tử là hộp kiểm hoặc đầu vào radio, thì phần tử đó có thuộc tính

   {
       "head": [
       {
           "title": [
           {
               "_value": "Floyd Hightower's Projects"
           }],
           "meta": [
           {
               "_attributes":
               {
                   "charset": "UTF-8"
               }
           },
           {
               "_attributes":
               {
                   "name": "description",
                   "content": "Floyd Hightower's Projects"
               }
           },
           {
               "_attributes":
               {
                   "name": "keywords",
                   "content": "projects,fhightower,Floyd,Hightower"
               }
           }]
       }]
   }
   

   11

Thêm phần sau để tạo kiểm tra này

  

+   Name
+   
+
    Email
    

    Submit
  

3

GHI CHÚ. Phương thức

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

46 là một cách dễ dàng để xem liệu một giá trị có trong một mảng hay không. Tôi thích điều này hơn nhiều lần kiểm tra

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

39, câu lệnh chuyển đổi hoặc các cách khác để khớp một giá trị với một mảng

Bước 4. 2 — Thêm séc vào

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

24

Bây giờ chúng ta có thể thêm séc này vào

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

24, đơn giản như thêm điều kiện thứ hai vào séc

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

39 hiện tại của chúng ta

  

+   Name
+   
+
    Email
    

    Submit
  

4

Bây giờ chúng ta có thể chạy mã của mình và thấy rằng đầu ra sạch hơn nhiều

  

+   Name
+   
+
    Email
    

    Submit
  

5

Điều này tốt hơn nhiều - bây giờ chúng tôi chỉ nhận được các phần tử thực sự có giá trị được đặt

Bước 5. Nếu một trường cho phép nhiều giá trị, hãy lưu trữ chúng trong một mảng

Nhưng chúng ta vẫn chưa hoàn thành, vì biểu mẫu vẫn đang làm rối trường

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

51 — đây rõ ràng là trường quan trọng nhất

Hãy thử chọn cả “Pizza” và “Cake” để xem vấn đề

  

+   Name
+   
+
    Email
    

    Submit
  

6

Không. Đây là một thảm họa. Chúng tôi cần cả pizza VÀ bánh ngọt. Vì vậy, hãy chắc chắn rằng điều đó có thể xảy ra

Bước 5. 1 — Tạo kiểm tra cho các phần tử chấp nhận nhiều giá trị

Việc kiểm tra xem có cho phép nhiều giá trị hay không có hai phần, vì có hai phần tử cho phép nhiều giá trị

Trước tiên, chúng ta cần thêm dấu kiểm cho bất kỳ hộp kiểm nào. Điều này là đủ đơn giản. chúng tôi chỉ kiểm tra xem

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

52 có phải là

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

53 không

  

+   Name
+   
+
    Email
    

    Submit
  

7

Thứ hai, chúng ta cần thêm kiểm tra cho phần tử

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

54 với thuộc tính

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

55

Điều này phức tạp hơn một chút, nhưng vẫn khá đơn giản. Một

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

54 có một thuộc tính gọi là

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

57, vì vậy chúng tôi sẽ kiểm tra thuộc tính đó trước. Tiếp theo, chúng tôi kiểm tra thuộc tính

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

55. Nếu cả hai đều tồn tại, séc của chúng tôi sẽ trả lại

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

33

  

+   Name
+   
+
    Email
    

    Submit
  

8

Bước 5. 2 — Xử lý các hộp kiểm trong

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

24

Bên trong

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

24, chúng ta cần thêm một khối

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

39 khác cho hàm

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

63 của mình

Nếu phần tử hiện tại là một hộp kiểm, chúng ta cần lưu trữ (các) giá trị của nó trong một mảng. Trước tiên hãy xem mã, sau đó chúng ta sẽ nói về cách thức hoạt động của nó

  

+   Name
+   
+
    Email
    

    Submit
  

9

Vì chúng tôi cần lấy các giá trị của phần tử vào một mảng, nên chúng tôi sử dụng một chút tốc ký trong

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

64, có nghĩa là “sử dụng mảng hiện có hoặc một mảng mới, trống”

Sau đó, chúng tôi sử dụng

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

65 để thêm giá trị hiện tại vào mảng

Bây giờ nếu chúng tôi kiểm tra các tùy chọn cho cả bánh pizza và bánh ngọt, chúng tôi sẽ thấy như sau

  function handleSubmit(event) {
    event.preventDefault();

    const data = new FormData(event.target);

+   const value = Object.fromEntries(data.entries());

    console.log({ value });
  }

  const form = document.querySelector('form');
  form.addEventListener('submit', handleSubmit);

0

Tốt hơn nhiều. Khủng hoảng đã được ngăn chặn, mọi người

Bước 5. 3 — Viết một hàm để truy xuất các giá trị từ nhiều lựa chọn

Bước cuối cùng của chúng tôi trước khi chúng tôi có thể gọi điều này đã hoàn thành là thêm kiểm tra cho các trường

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

54 hỗ trợ nhiều tùy chọn đã chọn. Tôi không phải là một fan hâm mộ lớn của loại đầu vào này, bởi vì tôi nghĩ rằng đó là một đầu vào khó hiểu cho mọi người sử dụng - một đầu vào dễ dàng thay thế bằng các hộp kiểm - nhưng để che phủ các cơ sở, chúng tôi sẽ cắm nó vào

Các tùy chọn đã chọn từ đa lựa chọn được lưu trữ trong đối tượng giống như mảng của riêng chúng, được gọi là

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

67, vì vậy chúng tôi cũng cần chạy

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

21 trên điều này

Hãy giữ mọi thứ sạch sẽ bằng cách chuyển cái này thành chức năng riêng của nó

Hàm này sẽ chấp nhận từng tùy chọn, kiểm tra xem thuộc tính

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

69 có phải là

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

33 hay không, sau đó thêm giá trị của nó vào một mảng có tên là

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

71, cuối cùng sẽ được trả về có chứa các giá trị của tất cả các tùy chọn đã chọn

Thêm phần sau vào bút

  function handleSubmit(event) {
    event.preventDefault();

    const data = new FormData(event.target);

+   const value = Object.fromEntries(data.entries());

    console.log({ value });
  }

  const form = document.querySelector('form');
  form.addEventListener('submit', handleSubmit);

1

Bước 5. 4 — Xử lý các giá trị đa lựa chọn trong

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

24

Để hoàn thành tất cả những điều này, chúng ta cần thêm một khối

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

73 vào hàm

<form>
  <label for="email">Emaillabel>
  <input type="email" name="email" id="email" />

  <button type="submit">Submitbutton>
form>

24 của mình

Sau khi kiểm tra

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

63, chúng tôi sẽ thêm một lần kiểm tra

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

76. Nếu điều đó trả về

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

33, chúng tôi sẽ thêm các giá trị của lựa chọn vào đối tượng dưới dạng một mảng bằng cách sử dụng

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

78

Thực hiện các cập nhật sau cho bút

  function handleSubmit(event) {
    event.preventDefault();

    const data = new FormData(event.target);

+   const value = Object.fromEntries(data.entries());

    console.log({ value });
  }

  const form = document.querySelector('form');
  form.addEventListener('submit', handleSubmit);

2

Chạy thử nghiệm nhanh các giá trị đa lựa chọn

Vì biểu mẫu hiện tại của chúng tôi không có lựa chọn với thuộc tính

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

55, vì vậy hãy nhanh chóng thêm nó vào trường

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

80 trong bút của chúng tôi

Tìm kiếm

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

54 trong ngăn HTML và thêm thuộc tính

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

55 như vậy

  function handleSubmit(event) {
    event.preventDefault();

    const data = new FormData(event.target);

+   const value = Object.fromEntries(data.entries());

    console.log({ value });
  }

  const form = document.querySelector('form');
  form.addEventListener('submit', handleSubmit);

3

Bây giờ chúng ta thực sự có thể kiểm tra. Nhấp vào cả hai tùy chọn và gửi biểu mẫu. Đầu ra bây giờ sẽ là

  function handleSubmit(event) {
    event.preventDefault();

    const data = new FormData(event.target);

+   const value = Object.fromEntries(data.entries());

    console.log({ value });
  }

  const form = document.querySelector('form');
  form.addEventListener('submit', handleSubmit);

4

Sau khi chúng tôi đã kiểm tra, chúng tôi có thể xóa thuộc tính

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

55 khỏi đầu vào

function handleSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  const value = data.get('email');

  console.log({ value });
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

54

GHI CHÚ. Đọc các giá trị từ nhiều lựa chọn không được hỗ trợ trong IE11 trở xuống bằng cách sử dụng tập lệnh này. Cá nhân tôi khuyên bạn chỉ nên sử dụng các hộp kiểm — tôi nghĩ nhiều lựa chọn là một trải nghiệm người dùng khó hiểu đối với nhiều người — nhưng nếu bạn cần hỗ trợ chúng trong các trình duyệt cũ hơn, bạn sẽ cần sửa đổi mã này

Kết quả cuối cùng. Các giá trị trường biểu mẫu được thu thập trong một đối tượng để sử dụng dưới dạng JSON

Tại thời điểm này, chúng tôi đã xây dựng một tập lệnh nhỏ sẽ trích xuất các giá trị từ một biểu mẫu dưới dạng đối tượng bằng chữ, có thể dễ dàng chuyển đổi thành JSON bằng cách sử dụng

{
    "head": [
    {
        "title": [
        {
            "_value": "Floyd Hightower's Projects"
        }],
        "meta": [
        {
            "_attributes":
            {
                "charset": "UTF-8"
            }
        },
        {
            "_attributes":
            {
                "name": "description",
                "content": "Floyd Hightower's Projects"
            }
        },
        {
            "_attributes":
            {
                "name": "keywords",
                "content": "projects,fhightower,Floyd,Hightower"
            }
        }]
    }]
}

94

Làm cách nào để chuyển đổi đầu vào HTML thành JSON?

Làm cách nào để tạo tệp JSON từ biểu mẫu HTML?

Bạn có thể sử dụng HTML trong JSON không?

Làm cách nào để chuyển đổi HTML sang JSON bằng JS?