封装表单序列化

秒速五厘米 2021-09-02 07:10 267阅读 0赞

var Serialize{
    
             // 表单传递进来 我们首先要获取到 表单中有哪些控件 
            // 表单元素有一个属性 elements 指向当前表单中的所有控件
            // console.log(form.elements);
            // 我们用到的只是带有name属性的哪些 那些不带name属性的我们用不到
            // 定义一个数组 用于存放所有的带name属性的
    
        serialize: function(form) {
           
            var arr = [];
    
            for (var i = 0; i < form.elements.length; i++) {
    
                if (form.elements[i].name) {
    
                    arr.push(form.elements[i]);
                }
            }
            // 循环结束 数组中只剩下带name的了
            // console.log(arr);
            // 定义字符串
            var query = "";
    
            // 循环arr
            for (var i = 0; i < arr.length; i++) {
    
            // text、password、email、textarea 它们是可以直接拼接的 但是radio、checkbox等它们是需要额外判定是否被选中的
                if (arr[i].type === "text" || arr[i].type === "password" || arr[i].type === "textarea") {
    
                    query += arr[i].name + "=" + encodeURIComponent(arr[i].value) + "&";
    
                } else if (arr[i].type === "checkbox" || arr[i].type === "radio") {
    
                    // 如果是checkbox或者radio 则需要判定是否被选中
                    if (arr[i].checked) {
    
                        // 如果选中，就拼接
                        query += arr[i].name + "=" + encodeURIComponent(arr[i].value) + "&";
                    }
                    // 没有选中就不做事
                }
            }
    
            //去掉&
            return query.slice(0, -1);
        }
    }
    
    
    
    
    使用方式：  Serialize.serialize(document.forms[0]);