JavaScript 表單腳本——“表單序列化”的注意要點

BlackHole1 發布于2019-08-19 17:29 / 3646人閱讀

摘要：瀏覽器如何將數據發送給服務器對表單字段的名稱和值進行編碼，使用和號分隔不發送禁用的表單字段只發送勾選的復選框和單選按鈕不發送為和的按鈕多選框中每個選中的值多帶帶一個條目在單擊提交按鈕提交表單的情況下，也會發送提交按鈕。否則不發送提交按鈕。

瀏覽器如何將數據發送給服務器：

對表單字段的名稱和值進行URL編碼，使用和號（&）分隔

不發送禁用的表單字段

只發送勾選的復選框和單選按鈕

不發送type為“reset”和“button”的按鈕

多選框中每個選中的值多帶帶一個條目

在單擊提交按鈕提交表單的情況下，也會發送提交按鈕。否則不發送提交按鈕。也包括type為“image”的input元素

select元素的值，就是選中的option元素的value特性值

實現表單序列化的代碼：

function serialize(form) {
    var parts = [],
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;

    for (var i = 0, len = form.elements.length; i < len; i++) {
        field = form.elements[i];

        switch (field.type) {
            case "select-one":
            case "select-multiple":

            if (field.name.length) {
                for (var j = 0, optLen = field.options.length; j < optLen; j++) {
                    option = field.options[j];
                    if (option.selected) {
                        optValue = "";
                        if (option.hasAttributes) {
                            optValue = ((option.hasAttributes("value")) ? option.value : option.text);
                        } else {
                            optValue = (option.attributes("value").specified ? option.value : option.text);
                        }
                        parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                    }
                }
            }
            break;

            case undefined:
            case "file":
            case "submit":
            case "reset":
            case "button":
                break;

            case "radio":
            case "checkbox":
                if (!field.checked) {
                    break;
                }
            //這里沒有break
            default:
                if (field.name.length) {
                    parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
                }
        }
    };
    return parts.join("&");
}

這個函數首先定義了一個名為parts的數組，用于保存要創建的字符串的各個部分；

然后通過for循環迭代每個表單字段，并將其保存在field變量中；

用switch語句檢測type屬性；

最麻煩的就是select元素，因為他有單選和多選之分，還要檢查是否存在value值，如果不存在就獲取其text值，在DOM兼容的瀏覽器中需要使用hasAttribute()方法，在IE中則需要使用specified屬性；

對于fieldset元素，沒有type屬性就不需要序列化；

其他諸如按鈕文件輸入字段等等都要忽略；

最后對于單選按鈕和復選框，要檢查其checked屬性是否為false，如果是則退出switch語句；如果為true，則繼續執行default語句（所以checkbox的break行代碼后面沒有break，而是default）；

default語句則是將當前字段的名稱和值進行編碼并添加到parts數組中；

最后就是利用join()函數格式化整個字符。

GPU云服務器云服務器表單序列化 js表單序列化 js表單序列化格式化云主機的要點

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78574.html

表單腳本

摘要：文本框腳本有兩種方式表現文本框的單行文本框和的多行文本框。對于單行文本框，通過特性可以指定文本框能夠顯示的字符數，通過特性訪問其內容，而則用于指定其可以接受的最大字符數。 title: 表單腳本 date: 2016-12-19 15:17 tags: JavaScript 0x00 表單基礎在 HTML 中，表單由元素來表示，但是在 JavaScript 中，表單對應...

stormgens 2019-08-21 11:19 評論0 收藏0
系統學習前端之表單序列化

摘要：表單序列化概述隨著的出現，表單的序列化已經是一個常見的需求。元素的值，就是選中的元素的屬性的值，如果元素沒有屬性，則是元素的文本值。參考高級程序設計表單序列化 1. 概述隨著Ajax的出現，表單的序列化已經是一個常見的需求。我們先明確表單提交時，瀏覽器是怎么樣將數據發送給服務器的對表單字段的名稱和值進行URL編碼（調用encodeURIComponent()方法），使用&分隔，...

antz 2019-08-01 15:38 評論0 收藏0
系統學習前端之表單序列化

摘要：表單序列化概述隨著的出現，表單的序列化已經是一個常見的需求。元素的值，就是選中的元素的屬性的值，如果元素沒有屬性，則是元素的文本值。參考高級程序設計表單序列化 1. 概述隨著Ajax的出現，表單的序列化已經是一個常見的需求。我們先明確表單提交時，瀏覽器是怎么樣將數據發送給服務器的對表單字段的名稱和值進行URL編碼（調用encodeURIComponent()方法），使用&分隔，...

curried 2019-08-20 10:29 評論0 收藏0
form表單那點事兒(下) 進階篇

摘要：在表單提交時，瀏覽器會自動進行一系列的校驗工作，沒有通過校驗的表單是無法提交到服務器的。而方法提交表單，會在請求中發送表單字段鍵值對。表單提交事件表單提交到服務器時，會觸發事件。上一篇主要溫習了一下form表單的屬性和表單元素，這一片主要講解用JavaScript如何操作form。表單操作取值用JavaScript操作表單，免不了會有取值賦值操作，比如有以下表單： ...

jerryloveemily 2019-08-01 15:24 評論0 收藏0