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

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);
                    }
                });
            }
        }
    }

  

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

时间: 2024-12-12 21:09:50

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

form表单转化json对象

利用 $.fn 可以让每一个jquery 对象都能直接使用这个方法. //form表单转化json对象$.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].pus

使用ajax方法实现form表单的提交

转http://www.cnblogs.com/han-1034683568/p/7199168.html 写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续

form表单转换为Json字符串数据

https://github.com/marioizquierdo/jquery.serializeJSON 效果图 加载使用 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.serializejson.js"></script>

用jquery写自己的form表单验证

这几天看了锋利的jquery,感觉很不错.特别是jquery强大的选择器.今天就利用jquery写了一个自己的form表单验证的小案例.当巩固下jquery.首先贴下代码,当然只是一个小案例. 思路:   1.<input type="text" Validate="Date" id="date"/>这里的 Validate:是我们需要验证的类型(属于日期类型),这里你也可以自己定义.id属性就不用说了.<input type=

jQuery实现ajax提交form表单(可以是提交json),用springmvc接收。图文详解

第一种方法(简单易用,防蚊虫): 1.1 从form表单到congtroller接收.1 是form表单,2 是ajax提交 3 springmvc接收 1.2 debug 看后台数据,看到了吧,userEO接收到数据了 1.3 有人想看看seralize和seralizeArray数据不同 seralize:id=1&name=xiaohua&age=18&sex=man seralizeArray[ id 1],[ name xiaohua],[ age 18],[ sex m

jquery的ajax提交form表单方式总结

方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", dataType: "html", url: AjaxURL + '?Action=' + 'Submit

javascript-js将form表单序列化[json字符串、数组、对象]

1.序列化为字符串 $("#Form").serialize();//name=zhangsan&sex=1&age=20   2.序列化为数组 $("#form").serializeArray();//[Object, Object, Object] 3.序列化为对象 function getFormJson(form) { var o = {}; var a = $(form).serializeArray(); $.each(a, funct

jquery使用ajax提交form表单

$.ajax({ type: jqform.attr('method'), // 提交方式 get/post url: jqform.attr('action'), // 需要提交的 url data:jqform.serialize(), success: function(json) { // var json = eval('(' + json + ')'); if(json.state) { alert('修改成功!'); ct.assoc.close(); return true; }

form表单转换为json格式,支持数组

$.fn.serializeObject = function () { var keyValues = this.serializeArray(); var pattern=/\[(\d+)\]/; var filter_keys = [], normal_keys = keyValues.filter(function (v, i) { if (~v.name.indexOf('.')||~pattern.test(v.name)) { filter_keys.push(v); return