jQuery 表单数据存入 JSON

表单数据转JSON

jQuery 1.8.3

javaScript

HTML

JSON

HTML

    
    


    

        username 

        password 

        youremail 

        sex 男
            女

        hobby  运动 
             聊天 
             游戏 

        province 
            河南省
            河北省
            湖南省
            湖北省
        
    
    
    
    
    
    
    
    
    

调试

因为本人没用过jQuery，所以前期写了一堆事件，做了一些调试工作...

// 获取需要的元素
$("#getEveryOne").click(function(){
    // 拿到form节点内的所有元素
    $("form").children("[name]").each(function(){
        // 下面取消对应的注释以查看相应效果
        // console.log(this) // DOM对象
        console.log($(this)) // jQuery对象
    })
})

• 获取表单中的数据

// get value
$("#getValue").click(function(){
    // 拿出text框里的内容
    $("form").children("[type='text']").each(function(){
        console.log($(this).val())
    })

    console.log($("form").children("[type='radio']:checked").val())

    $("form").children("[type='checkbox']:checked").each(function(){
        console.log($(this).val())
    })

    console.log($("form").children("select").val())
})

• 获取表单中各元素的name

后边要使用到 name 做判断

// get name
$("#getName").click(function(){
    $("form").children("[name]").each(function(){
        console.log(this.name)
    })
})

• 获取表单中个元素的type

$("#getType").click(function(){
    $("form").children("[name]").each(function(){
        console.log($(this).attr("type"))
    })
})

表单数据存入JSON

• 初始化JSON对象

$("#getNullJSON").click(function(){
    $("form").children("[name]").each(function(){
        if($(this).attr("type") == "text"){
            //pass
            json[$(this).attr("name")] = ""
        }else if($(this).attr("type") == "radio"){
            //pass
            json[$(this).attr("name")] = []
        }else if($(this).attr("type") == "checkbox"){
            //pass
            json[$(this).attr("name")] = []
        }else{
            json[$(this).attr("name")] = ""
        }
    })
    console.log(json)
})

• 开始把数据存入JSON

$("#getJSON").click(function(){
    $("form").children("[name]").each(function(){
        if($(this).attr("type") == "radio"){
            if($(this).prop("checked")){
                json[$(this).attr("name")].push($(this).val())
            }
        }else if($(this).attr("type") == "checkbox"){
            if($(this).prop("checked")){
                json[$(this).attr("name")].push($(this).val())
            }
        }else{
            json[$(this).attr("name")] = $(this).val()
        }
    })
    console.log(json)
})

• 清空表单数据

// set Form
$("#setForm").click(function(){
    // 判断当前对象是否是文本框
    $("form").children("[name]").each(function(){
        if($(this).attr("type") != "text"){
            $(this).prop("checked", false)
        }else{
            $(this).val("")
        }
    })
})

• 把JSON数据填充进表单中

$("#fillForm").click(function(){
    $("form").children("[name]").each(function(){
        $(this).val(json[$(this).attr("name")])
        // console.log($(this))
        // console.log(json[$(this).attr("name")])
        // console.log($(this).val(json[$(this).attr("name")]))
    })
})

---

优化

HTML

    
    
    


    

        username 

        password 

        youremail 

        sex 男
            女

        hobby  运动 
             聊天 
             游戏 

        province 
            河南省
            河北省
            湖南省
            湖北省
        
    
    
    
    

    

JS

var json = {}

function initJSON(){
    json = {}
    $("form > [name]").each(function(){
        let type = $(this).attr("type")
        let key = $(this).attr("name")
        type == "radio" || type == "checkbox" ? json[key] = [] : json[key] = "";
    })
    console.log(json)
}

$(function(){
    $("#getJSON").click(function(){
        initJSON()
        $("form > [name]").each(function(){
            let type = $(this).attr("type")
            let key = $(this).attr("name")
            let value = $(this).val()
            type == "radio" || type == "checkbox" ? $(this).prop("checked") ? json[key].push(value) : false : json[key] = value;
        })
        console.log(json)
        $("#output").val(JSON.stringify(json, null, " "))
    })
})

网页

...

注意：

radio 和 checkbox 中的 value 不止一个。

若要把多个数据填充给一个 key ，是需要使用数组存放数据的。

第一次写的时候没考虑到 radio 和 checkbox 的数据，就直接使用字符串赋值了。

后来调试的时候发现，不管多选框中选择多少个项，hobby 的 value 始终是最后一个 checkbox 的 value....

使用数组，首先就要初始化对象。

因为使用 Array 对象的 push() 方法可以很方便的向后插入数据...