JS序列化

最新推荐文章于 2024-06-28 10:57:54 发布

cs320721

最新推荐文章于 2024-06-28 10:57:54 发布

阅读量493

点赞数

本文链接：https://blog.csdn.net/cs320721/article/details/76376710

版权

这篇博客介绍了如何使用JavaScript来序列化HTML表单的数据。通过一个名为`FormUtil`的对象，实现了获取单选按钮、复选框和下拉选择框的值，并将表单元素转换为URL编码的字符串。`FormUtil.serialize`方法遍历表单元素，根据不同的输入类型收集值，并跳过禁用的元素。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form name="form1" >
    <input type="text" name="xxx" >
    <input type="text" name="ccc" >


    <select name="sel">
        <option value="one">11111</option>
        <option value="two">22222</option>
    </select>
</form>
<br>
<br>
<input type="button" value="dianwo" οnclick="che()">


<script type="text/javascript">
    function che(){
        alert("00000000")
        var forms = document.getElementsByName("form1")[0];
        alert(forms.elements);
        var s = FormUtil.serialize(forms.elements);

        alert(s)
    }



</script>
<script type="text/javascript">
    var FormUtil = {
        getRadioVal : function(elements){
            var value = null;
            if(elements.value != undefined && elements.value !=""){
                value = elements.value;
            }else{
                for(var i= 0;i<elements.length;i++){
                    if(elements[i].checked){
                        value = elements[i].value;
                        break;
                    }
                }
            }
            return value;
        },
        getCheckValue : function (elements) {
            var arr = new Array();
            for(var i= 0;i<elements.length;i++){
                if(elements[i].checked){
                    arr.push(elements[i].value);
                }
                if(arr.length > 0){
                    return arr.join(',');
                }else{
                    return null;
                }
            }
        },
        getSelectValue : function (elements){
            if(elements.selectedIndex == -1){
                return null;
            }
            if(elements.multiple){
                var arr = new Array();
                var options = elements.options;
                for(var i = 0; i<options.length;i++){
                    if(options[i].selected){
                        arr.push(options.value)
                    }
                }
                return arr.join(",");
            }else{
                return elements.options[elements.selectedIndex].value;
            }

        },
        serialize : function(elements){
            var arr = new Array();
            checkboxName = null;
            for(var i = 0; i<elements.length;i++){
                field = elements[i];
                if(field.disabled){
                    continue;
                }
                switch (field.type.toLowerCase()){
                    case "select-one":
                    case "select-multiple":
                        var val = encodeURIComponent(this.getSelectValue(field));
                        if((val != "" &&val != null)){
                            arr.push(encodeURIComponent(field.name) + "=" + val);
                        }
                        break;
                    case undefined:
                    case "button":
                    case "submit":
                    case "reset":
                    case "file":
                        break;
                    case "checkbox":
                        if(!field.checked){
                            checkboxName = field.name;
                            var val = encodeURIComponent(this.getCheckValue(form.elements[checkboxName]));
                            if((val != "" && val != null)){
                                arr.push(encodeURIComponent(checkboxName) + "=" + val);
                            }
                        }
                    case "radio":
                        if(!field.checked){
                            break;
                        }
                    default:
                        if(field.name.length > 0){
                            var val = encodeURIComponent(field.value);
                            if((val != "" && val != null)){
                                arr.push(encodeURIComponent(field.name) + "=" + val)
                            }
                        }

                }
            }
            return arr.join("&");
        }

    }




</script>

</body>
</html>