成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

系統(tǒng)學(xué)習(xí)前端之表單序列化

curried / 1285人閱讀

摘要：表單序列化概述隨著的出現(xiàn)，表單的序列化已經(jīng)是一個(gè)常見的需求。元素的值，就是選中的元素的屬性的值，如果元素沒(méi)有屬性，則是元素的文本值。參考高級(jí)程序設(shè)計(jì)

表單序列化 1. 概述

隨著Ajax的出現(xiàn)，表單的序列化已經(jīng)是一個(gè)常見的需求。我們先明確表單提交時(shí)，瀏覽器是怎么樣將數(shù)據(jù)發(fā)送給服務(wù)器的

對(duì)表單字段的名稱和值進(jìn)行URL編碼（調(diào)用encodeURIComponent()方法），使用&分隔，無(wú)論是get還是post請(qǐng)求，都是一樣的

不發(fā)送禁用的表單字段，即屬性disabled為true的

只發(fā)送勾選的復(fù)選框和單選按鈕

不發(fā)送type為reset和button的按鈕

多選選擇框中每個(gè)選擇的值多帶帶一個(gè)條目

在單擊提交按鈕表單的情況下，也會(huì)發(fā)送提交按鈕的value值，否則不發(fā)送提交按鈕。

select元素的值，就是選中的option元素的value屬性的值，如果option元素沒(méi)有value屬性，則是option元素的文本值。

2. 實(shí)現(xiàn)

跟據(jù)上述，我們可以來(lái)實(shí)現(xiàn)一個(gè)表單的序列化，代碼是對(duì)《JavaScript高級(jí)程序設(shè)計(jì)》表單腳本一章中的代碼改進(jìn)

增加參數(shù)驗(yàn)證

將form.elements轉(zhuǎn)為數(shù)組，提高性能

改進(jìn)多選選擇框，同一個(gè)參數(shù)名的值進(jìn)行合并,試驗(yàn)了一下，如果options沒(méi)有HTML的value屬性，讀取該option的value屬性會(huì)等于它的text屬性(測(cè)試瀏覽器 IE8，chrome)

function serialize(form) {
    // 參數(shù)驗(yàn)證
    if(!form && form.nodeName.toUpperCase() != "FORM" ){
        throw new Error("invalid parameters");
    }
    
    var encode = window.encodeURIComponent,
        slice = Array.prototype.slice;

    var params = [],
        i = 0,
        fields = slice.call(form.elements),
        len = fields.length,
        el,
        type;

    for(;i < len; i++){
        el = fields[i];
        type = el.type.toLowerCase();
        switch(type){
            case  "undefined":
            case  "button":
            case  "submit":
            case  "reset":
            case "file":
                break;
            case "select-one":
            case "select-multiple":
                if(el.name.length){
                    var j = 0, 
                        opts = slice.call(el.options),
                        oLen = opts.length,
                        selected = [] , // 用于合并參數(shù)
                        opt;            
                    for(; j < oLen; j++){
                        opt = opts[j];
                        if(!opt.selected)continue;
                        selected.push(opt.value);
                    }
                    params.push(encode(el.name) + "=" + encode(selected.join(",")));
                }
                break;
            case "checkbox":
            case "radio":
                if(!el.checked){
                    break;
                }   
            default:
                if(el.name.length){
                    params.push(encode(el.name) + "=" + encode(el.value));
                }
        }
    }
    return params.join("&");
};

以上代碼在IE8會(huì)報(bào)錯(cuò)，原因是option元素的實(shí)現(xiàn)并非一個(gè)JavaScript對(duì)象，導(dǎo)致無(wú)法使用slice，當(dāng)然解決的方法也有，就是重寫slice函數(shù)，但是這脫離了本章節(jié)的主題。

參考

《JavaScript高級(jí)程序設(shè)計(jì)》

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80169.html

相關(guān)文章

  • 系統(tǒng)學(xué)習(xí)前端之表單序列化

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

    antz 評(píng)論0 收藏0

  • 系統(tǒng)學(xué)習(xí)前端之FormData詳解

    摘要：概述類型其實(shí)是在級(jí)定義的，它是為序列化表以及創(chuàng)建與表單格式相同的數(shù)據(jù)當(dāng)然是用于傳輸提供便利。如果是使用表單初始化，每一個(gè)表單字段對(duì)應(yīng)一條數(shù)據(jù)，它們的屬性即為值，它們屬性對(duì)應(yīng)值。參考兼容性查詢高級(jí)程序設(shè)計(jì) FormData 1. 概述 FormData類型其實(shí)是在XMLHttpRequest 2級(jí)定義的，它是為序列化表以及創(chuàng)建與表單格式相同的數(shù)據(jù)（當(dāng)然是用于XHR傳輸）提供便利。 2. ...

    jhhfft 評(píng)論0 收藏0

  • 在線Excel開發(fā)之新人學(xué)習(xí)筆記 - 工作簿2

    摘要：支持以下自定義特性的序列化與反序列化自定義單元格類型，自定義函數(shù)，自定義格式，自定義函數(shù)迷你圖，自定義標(biāo)簽，以及自定義行篩選。 Spread JSON 導(dǎo)入導(dǎo)出 在SpreadJS表單控件中可以導(dǎo)入導(dǎo)出JSON數(shù)據(jù)，收集界面的錄入數(shù)據(jù)， 數(shù)據(jù)源序列化 若要將表單中的數(shù)據(jù)源序列化到JSON對(duì)象中，可以設(shè)置參數(shù)includeBindingSource: true，若未設(shè)置默認(rèn)為false....

    cgspine 評(píng)論0 收藏0

  • 前端開發(fā)知識(shí)點(diǎn)整理

    摘要：前言本文主要是有關(guān)前端方面知識(shí)按照目前的認(rèn)知進(jìn)行的收集歸類概括和整理，涵蓋前端理論與前端實(shí)踐兩方面。 前言：本文主要是有關(guān)前端方面知識(shí)按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實(shí)踐』兩方面。本文會(huì)告訴你前端需要了解的知識(shí)大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...

    Blackjun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<