表单数据JSON互相转换的方法

比如一个表单，要把输入的表单中，提交后，JSON化或者XML化，传递给第三方；
又或者获得一个第三方返回的JSON,XML，提出其中的数据，在这个表单中呈现出来，这个是
数据交换中经常用到的，收藏一个简单的方法：

 <form method="post" id="formDemo">
        <input name="first" type="text" data-text="text">
        <textarea name="firstArea" cols="20" rows="5" data-text="text"></textarea>
        <input type="checkbox" name="checkboxFirst" value="1" data-text="checkbox">1
        <input type="checkbox" name="checkboxFirst" value="2" data-text="checkbox">2
        <input type="checkbox" name="checkboxSecond" value="3" data-text="checkbox">3
        <input type="checkbox" name="checkboxSecond" value="4" data-text="checkbox">4
        <select name="selectFirst" data-text="select">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <input type="radio" name="radioFisrt" value="1" data-text="radio">1
        <input type="radio" name="radioFisrt" value="2" data-text="radio">2
        <input type="radio" name="radioSecond" value="3" data-text="radio">3
        <input type="radio" name="radioSecond" value="4" data-text="radio">4
        <button onclick="getValue();">确定</button>
    </form>
</div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script src="jForm.values.js"></script>
<!--<script src="main.min.js"></script>-->
<script>
 function getValue(){
	 var a=forms.values("formDemo");
        console.log("values is",a);
    }
    $(function () {
       setValue();
//getValue();
        function setValue() {
            var json = {
                first: "11",
                firstArea: "22",
               checkboxFirst: [1],
              checkboxSecond: [4],
              selectFirst: 3,
              radioFisrt: 2,
               radioSecond: 2
          };
           forms.resetValues("formDemo", json);
        }
    });



</script>

表单中，增加对应的自定义属性，表明每个控件的类型；
相关的JS解析：

forms = {
    values: function (formName) {
        var value = {};
        //var radioName = '';
        $("#" + formName).find("[data-text='text']").each(function (index, domEle) {
            var name = $(domEle).attr("name");
            value[name] = $(domEle).val();
            //alert(value[name]);
        });
        $("#" + formName).find("[data-text='select']").each(function (index, domEle) {
            var name = $(domEle).attr("name");
            value[name] = $(domEle).find("option:selected").val();
            //alert(value[name]);
        });
        $("#" + formName).find("[data-text='checkbox']").each(function (index, domEle) {
            var checkArr = [];
            var name = $(domEle).attr("name");
            if ($(domEle).filter(":checked").val() != undefined) {
                if (value[name]) {
                    checkArr = value[name];
                    checkArr.push($(domEle).val());
                    value[name] = checkArr;
                } else {
                    checkArr.push($(domEle).val());
                    value[name] = checkArr;
                }
            }
            //alert(value[name]);
        });
        $("#" + formName).find("[data-text='radio']").each(function (index, domEle) {
            var name = $(domEle).attr("name");
            if (!value[name] && $(domEle).filter(":checked").val() != undefined) {
                value[name] = $(domEle).filter(":checked").val();
            }
            //alert(value[name]);
        });
       return value;
    },
    resetValues: function (formName, data) {
        $("#" + formName).find("[data-text]").each(function (index, domEle) {
            var name = $(domEle).attr("name");
            if (data[name] != undefined) {
                switch ($(domEle).attr("data-text")) {
                    case "text":
                        $(domEle).val(data[name]);
                        break;
                    case "select":
                        $(domEle).find("option[value='" + data[name] + "']").attr("selected", true);
                        break;
                    case "checkbox":
                        $.each(data[name],function(index,value) {
                            $("#" + formName).find("[name='" + name + "']").filter("[value='" + value + "']").attr("checked", true);
                        });
                        break;
                    case "radio":
                        $("#" + formName).find("[name='" + name + "']").filter("[value='" + data[name] + "']").attr("checked", true);
                        break;
                }
            }
        });
    }
};