JQuery将 form里面内容转json,json填充form表单-罗分明网络博客

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>form里面内容转json,json填充form表单</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script type="text/javascript">
        /**
        * 将form里面的内容序列化成json
        * 相同的checkbox用分号拼接起来
        * @param {obj} 需要拼接在后面的json对象
        * @method serializeJson
        * */
        $.fn.serializeJson = function (otherString) {
            var serializeObj = {},
                array = this.serializeArray();
            $(array).each(function () {
                if (serializeObj[this.name]) {
                    serializeObj[this.name] += ';' + this.value;
                } else {
                    serializeObj[this.name] = this.value;
                }
            });

            if (otherString != undefined) {
                var otherArray = otherString.split(';');
                $(otherArray).each(function () {
                    var otherSplitArray = this.split(':');
                    serializeObj[otherSplitArray[0]] = otherSplitArray[1];
                });
            }
            return serializeObj;
        };

        /**
         * 将josn对象赋值给form
         * @param {obj} 需要给form赋值的json对象
         * @method serializeJson
         * */
        $.fn.setForm = function (jsonValue) {
            var obj = this;
            $.each(jsonValue, function (name, ival) {
                var $oinput = obj.find("input[name=" + name + "]");
                if ($oinput.attr("type") == "checkbox") {
                    if (ival !== null) {
                        var checkboxObj = $("[name=" + name + "]");
                        var checkArray = ival.split(";");
                        for (var i = 0; i < checkboxObj.length; i++) {
                            for (var j = 0; j < checkArray.length; j++) {
                                if (checkboxObj[i].value == checkArray[j]) {
                                    checkboxObj[i].click();
                                }
                            }
                        }
                    }
                }
                else if ($oinput.attr("type") == "radio") {
                    $oinput.each(function () {
                        var radioObj = $("[name=" + name + "]");
                        for (var i = 0; i < radioObj.length; i++) {
                            if (radioObj[i].value == ival) {
                                radioObj[i].click();
                            }
                        }
                    });
                }
                else if ($oinput.attr("type") == "textarea") {
                    obj.find("[name=" + name + "]").html(ival);
                }
                else {
                    obj.find("[name=" + name + "]").val(ival);
                }
            })
        }

        $(function () {
            $("#form").setForm({ a: 'www.luofenming.com', b: '王五', c: '王五', d: '罗分明网络博客', e: 7, f: '8;10', i: '王' });
        });
        function submitForm() {
            console.log($("#form").serializeJson());
        }
    </script>
</head>

<body>
    <form id="form">
        <div><input type="text" name="a" /></div>
        <div><input type="text" name="b" id="b" /></div>
        <div><input type="hidden" name="c" id="c" /></div>
        <div>
            <textarea name="d" rows="8" cols="40"></textarea>
            <input type="checkbox" name="f" value="10" />
        </div>
        <div>
            <select name="e">
                <option value="5" selected="selected">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
            </select>
        </div>
        <div>
            <input type="checkbox" name="f" value="8" />
            <input type="checkbox" name="f" value="9" />
        </div>
        <div>
            <input name="i" type="radio" value="王" />王
            <input name="i" type="radio" value="小" />小
        </div>
        <div>
            <input type="button" name="g" value="Submit" id="g" onclick="submitForm()" />
        </div>
    </form>
</body>
</html>