码迷,mamicode.com
首页 > Web开发 > 详细

JQuery扩展方法实现Form表单与Json互相转换

时间:2019-06-12 15:23:24      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:add   ++   ase   pattern   扩展方法   input   json   ===   inpu   

1.把表单转换出json对象

 

 //把表单转换出json对象
    $.fn.toJson = function () {
        var self = this,
            json = {},
            push_counters = {},
            patterns = {
                "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                "key": /[a-zA-Z0-9_]+|(?=\[\])/g,
                "push": /^$/,
                "fixed": /^\d+$/,
                "named": /^[a-zA-Z0-9_]+$/
            };

        this.build = function (base, key, value) {
            base[key] = value;
            return base;
        };

        this.push_counter = function (key) {
            if (push_counters[key] === undefined) {
                push_counters[key] = 0;
            }
            return push_counters[key]++;
        };

        $.each($(this).serializeArray(), function () {
            // skip invalid keys
            if (!patterns.validate.test(this.name)) {
                return;
            }

            var k,
                keys = this.name.match(patterns.key),
                merge = this.value,
                reverse_key = this.name;

            while ((k = keys.pop()) !== undefined) {
                // adjust reverse_key
                reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), ‘‘);

                // push
                if (k.match(patterns.push)) {
                    merge = self.build([], self.push_counter(reverse_key), merge);
                }

                // fixed
                else if (k.match(patterns.fixed)) {
                    merge = self.build([], k, merge);
                }

                // named
                else if (k.match(patterns.named)) {
                    merge = self.build({}, k, merge);
                }
            }

            json = $.extend(true, json, merge);
        });

        return json;
    };

 

  

 

 

2.将josn对象赋值给form

 

//将josn对象赋值给form
    $.fn.loadData = function (obj) {
        var key, value, tagName, type, arr;

        this.reset();

        for (var x in obj) {
            if (obj.hasOwnProperty(x)) {
                key = x;
                value = obj[x];

                this.find("[name=‘" + key + "‘],[name=‘" + key + "[]‘]").each(function () {
                    tagName = $(this)[0].tagName.toUpperCase();
                    type = $(this).attr(‘type‘);
                    if (tagName == ‘INPUT‘) {
                        if (type == ‘radio‘) {
                            if ($(this).val() == value) {
                                    $(this).attr(‘checked‘, true);
                            }
                        } else if (type == ‘checkbox‘) {
                            arr = value.split(‘,‘);
                            for (var i = 0; i < arr.length; i++) {
                                if ($(this).val() == arr[i]) {
                                        $(this).attr(‘checked‘, true);
                                    break;
                                }
                            }
                        } else {
                            $(this).val(value);
                        }
                    } else if (tagName == ‘SELECT‘ || tagName == ‘TEXTAREA‘) {
                        $(this).val(value);
                    }
                });
            }
        }
    }

 

  

 

JQuery扩展方法实现Form表单与Json互相转换

标签:add   ++   ase   pattern   扩展方法   input   json   ===   inpu   

原文地址:https://www.cnblogs.com/fireicesion/p/11009680.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!