zoukankan      html  css  js  c++  java
  • 纯js将form表单的数据封装成json 以便于ajax发送

    使用方式:

    var json = form2Json("formId");//这里的参数是form表单的id值

    form2json.js

    function form2Json(formName){
    var form=document.getElementById(formName);
    var sb=new StringBuilder();var rcs=new Map();
        for ( var i = 0; i < form.elements.length; i++){
            var element = form.elements[i];    var name = element.name;
            if (typeof (name) === "undefined" || (name === null) || (name.length === 0)){continue;}
            var tagName = element.tagName;        
            if(tagName ==='INPUT'||tagName === 'TEXTAREA'){var type = element.type;
                if ((type === 'text')||(type === 'password') || (type === 'hidden') || (tagName === 'TEXTAREA')){
                    sb.append("""+name+"":""+encodeURIComponent(element.value.replace(/
    /ig,""))+""");
                }else if((type === 'checkbox') || (type === 'radio')){
                    rcs.putOverride(name,type);
                }else{continue;}
            }else if (tagName === 'SELECT'){var oc = element.options.length;
                for ( var j = 0; j <oc; j++){
                    if (element.options[j].selected){sb.append("""+name+"":""+(element.value)+""");}
                }
            }
        }    
        if(rcs.size()>0){
            for(var i=0;i<rcs.size();i++){
            var r=rcs.element(i);var radio="";
                var d=document.getElementsByName(r.key);
                if(r.value==="radio"){
                    for(j=0;j<d.length;j++){
                        if(d[j].checked){radio=d[j].value;}
                    }                
                }else{
                    for(j=0;j<d.length;j++){
                        if(d[j].checked){radio+=","+d[j].value;}
                    }
                    radio.substr(1);
                }
                sb.append("""+r.key+"":""+radio+""");
            }
        }
        return "{"+sb.toJsonString()+"}";
    }
    
    
    function StringBuilder(){
        this._element_ = new Array();
        this.append = function(item) {
            this._element_.push(item);
        }
        this.toString = function() {
            return this._element_.join("");
        }
        this.toJsonString = function() {
            return this._element_.join(",");
        }
        this.join = function(separator) {
            return this._element_.join(separator);
        }
        this.length = function() {
            return this._element_.length;
        }    
    }
    function Map() {
        this.elements = new Array();
        // 获取MAP元素个数
        this.size = function() {
            return this.elements.length;
        }
        // 判断MAP是否为空
        this.isEmpty = function() {
            return (this.elements.length < 1);
        }
        // 删除MAP所有元素
        this.clear = function() {
            this.elements = new Array();
        }
        // 向MAP中增加元素(key, value)
        this.put = function(_key, _value) {
            this.elements.push({key : _key,value : _value});
        }    
        //增加元素并覆盖
        this.putOverride = function(_key,_value){
            this.remove(_key);
            this.put(_key,_value);
        }
        // 删除指定KEY的元素,成功返回True,失败返回False
        this.remove = function(_key) {
            var bln = false;
            try {
                for (i = 0; i < this.elements.length; i++) {
                    if (this.elements[i].key == _key) {
                        this.elements.splice(i, 1);
                        return true;
                    }
                }
            } catch (e) {
                bln = false;
            }
            return bln;
        }
    
        // 获取指定KEY的元素值VALUE,失败返回NULL
        this.get = function(_key) {
            try {
                for (i = 0; i < this.elements.length; i++) {
                    if (this.elements[i].key == _key) {
                        return this.elements[i].value;
                    }
                }
            } catch (e) {
                return null;
            }
        }
        // 获取指定索引的元素(使用element.key,element.value获取KEY和VALUE),失败返回NULL
        this.element = function(_index) {
            if (_index < 0 || _index >= this.elements.length) {
                return null;
            }
            return this.elements[_index];
        }
        // 判断MAP中是否含有指定KEY的元素
        this.containsKey = function(_key) {
            var bln = false;
            try {
                for (i = 0; i < this.elements.length; i++) {
                    if (this.elements[i].key == _key) {
                        bln = true;
                    }
                }
            } catch (e) {
                bln = false;
            }
            return bln;
        }
        // 判断MAP中是否含有指定VALUE的元素
        this.containsValue = function(_value) {
            var bln = false;
            try {
                for (i = 0; i < this.elements.length; i++) {
                    if (this.elements[i].value == _value) {
                        bln = true;
                    }
                }
            } catch (e) {
                bln = false;
            }
            return bln;
        }
        // 获取MAP中所有VALUE的数组(ARRAY)
        this.values = function() {
            var arr = new Array();
            for (i = 0; i < this.elements.length; i++) {
                arr.push(this.elements[i].value);
            }
            return arr;
        }
        // 获取MAP中所有KEY的数组(ARRAY)
        this.keys = function() {
            var arr = new Array();
            for (i = 0; i < this.elements.length; i++) {
                arr.push(this.elements[i].key);
            }
            return arr;
        }
    }
    
      
  • 相关阅读:
    【PHPStorm使用手册】如何设置字体大小?
    Django——admin组件简单入门
    cookie与session
    Django
    练习题
    线程理论之大白话
    队列
    初识gevent模块
    Python第三方模块安装
    Python标准模块_concurrent.futures
  • 原文地址:https://www.cnblogs.com/wuyou/p/3466868.html
Copyright © 2011-2022 走看看