隨著 Ajax 的出現，表單序列化已經成為一種常見需求。在 JavaScript 中，可 以利用表單字段的 type 屬性，連同 name 和 value 屬性一起實現對表單的序列化。在編寫代碼之前， 有必須先搞清楚在表單提交期間，瀏覽器是怎樣將數據發送給服務器的。

1.??對表單字段的名稱和值進行 URL 編碼，使用和號(&)分隔。

2.?不發送禁用的表單字段。

3.?只發送勾選的復選框和單選按鈕。

4.?不發送 type 為"reset"和"button"的按鈕。

5.?多選選擇框中的每個選中的值單獨一個條目。

6.?在單擊提交按鈕提交表單的情況下，也會發送提交按鈕；否則，不發送提交按鈕。

7.?元素的值，就是選中的元素的 value 特性的值。如果元素沒有 value 特性，則是元素的文本值。

在表單序列化過程中，一般不包含任何按鈕字段，因為結果字符串很可能是通過其他方式提交的。除此之外的其他上述規則都應該遵循。

基本的表單序列化可以通過遍歷表單元素實現，實例代碼如下：

function?serialize(form){ var params = [];??var?eles?=?form.elements;????for?(var?i?=?0;i????let?field = ele[i];????switch(field.type){???? case "file": ???? case "submit":??????case?"reset":???????case?"button":?????? break;??????case?"radio":??????case "checkbox":????????if(!field.checked){???????? break;????????}????????default:???????? //不包含沒有名字的表單字段 ???????? if (field.name.length){ ???????? parts.push(encodeURIComponent(field.name) + "=" + ???????? encodeURIComponent(field.value)); ??????????}????}??} return parts.join("&");}

思考：vue ?react 的相關框架，iview ,?antd 的Form組件是如何實現的序列化？

未完待續。。。

關注我?一起回憶?《javaScript高級程序設計》《javaScript設計模式中》你沒注意過的細節

總結

以上是生活随笔為你收集整理的antd提交表单_表单序列化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。