国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

antz / 1106人閱讀

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

表單序列化 1. 概述

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

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

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

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

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

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

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

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

2. 實現(xiàn)

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

增加參數(shù)驗證

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

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

function serialize(form) {
    // 參數(shù)驗證
    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會報錯，原因是option元素的實現(xiàn)并非一個JavaScript對象，導(dǎo)致無法使用slice，當然解決的方法也有，就是重寫slice函數(shù)，但是這脫離了本章節(jié)的主題。

參考

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50015.html

相關(guān)文章

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

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

    curried 評論0 收藏0

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

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

    jhhfft 評論0 收藏0

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

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

    cgspine 評論0 收藏0

  • 前端開發(fā)知識點整理

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

    Blackjun 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<