将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式。

http://zhengxinlong.iteye.com/blog/848712

将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式。

/// <reference name="jquery.js" description="1.3.2版本以上" />

/*!* 扩展jQuery表单序列化函数:{ Version: 1.2, Author: Eric.Zheng, CreateDate: 2010-12-21 }
*
* 消除了jQuery.serialize()只能对form进行序列化的局限
* 该插件可以对任意jQuery对象进行序列化
* 返回数据格式有两种:1.<name&value>(默认)  2.json
*
* 调用方法:$(dom).form_serialize(dataType);
*   参数(可省略):dataType: 默认为html,即返回数据格式为<name&value>;若要返回json格式,则dataType = json;
* 返回数据:序列化表单数据
*
* BUG修复:修复了1.0版本中,多个Dom元素使用同一个name属性时,获取的数据有缺失。
*
**/
(function ($) {
    var formJson = {};
    var currentForm = null;

    $.fn.form_serialize = function (dataType) {
        currentForm = $(this);
        formJson = {};
        var doms = currentForm.find(‘[name]‘);
        $.each(doms, function (index, dom) {
            var domName = $(dom).attr(‘name‘);
            if (!formJson[domName]) {
                formJson[domName] = { Name: domName, Type: $(dom).attr(‘type‘), Doms: currentForm.find(‘[name=‘ + domName + ‘]‘) };
            }
        });
        return getResult(dataType);
    };

    var getResult = function (dataType) {
        var d = {
            toJson: function () {
                var data = {};
                $.each(formJson, function (key, json) {
                    data[key] = getVal(json);
                });
                return data;
            },
            toString: function () {
                var val = ‘‘;
                var index = 0;
                $.each(formJson, function (key, json) {
                    var prefix = ‘&‘;
                    if (index == 0) prefix = ‘‘;
                    index++;
                    val += prefix + key + ‘=‘ + getVal(json);
                });
                return val;
            }
        };
        return dataType == ‘json‘ ? d.toJson() : d.toString();
    }

    var getVal = function (json) {
        var methods = {
            getDefaultVal: function (dom) {
                return $(dom).val();
            },
            getSelectVal: function (dom) {
                var val = ‘‘;
                var selectType = $(dom).attr(‘type‘);
                if (selectType == ‘select-multiple‘) {
                    var items = $(dom).val();
                    if (items == null) return ‘‘;
                    for (var i = 0; i < items.length; i++) {
                        val += i == 0 ? items[i] : (‘,‘ + items[i]);
                    }
                    return val;
                } else {
                    return $(dom).val();
                }
            },
            getRadioVal: function (dom) {
                return $(dom).attr(‘checked‘) ? $(dom).val() : null;
            },
            getCheckBoxVal: function (dom) {
                return methods.getRadioVal(dom);
            }
        };

        var dispacher = function (type, dom) {
            switch (type) {
                case ‘text‘:
                case ‘password‘:
                case ‘hidden‘:
                case ‘textarea‘:
                    return methods.getDefaultVal(dom);
                case ‘select-one‘:
                case ‘select-multiple‘:
                    return methods.getSelectVal(dom);
                case ‘radio‘:
                    return methods.getRadioVal(dom);
                case ‘checkbox‘:
                    return methods.getCheckBoxVal(dom);
                default:
                    return ‘‘;
            }
        };

        var domType = json.Type;
        var doms = $(json.Doms);
        var count = doms.length;
        if (count > 1) {
            var val = ‘‘;
            var index = 0;
            for (var i = 0; i < count; i++) {
                var v = dispacher(domType, doms.eq(i));
                if (v == ‘‘ || v == null || v == undefined)
                    continue;
                val += index++ == 0 ? dispacher(domType, doms.eq(i)) : (‘,‘ + dispacher(domType, doms.eq(i)));
            }
            return val;
        } else {
            return dispacher(domType, doms);
        }
    };
})(jQuery);
时间: 2024-10-27 11:30:40

将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式。的相关文章

表单出错,回到原页面时保留所有表单信息。

PHP中的 session_cache_limiter() 函数是指定会话页面所使用的缓冲控制方法. 语法:string session_cache_limiter ( [string cache_limiter])cache_limiter 要设置的缓存限制的名字返回缓存限制的名字 但是要值得注意的是session_cache_limiter()方法要写在session_start()方法之前才有用. 实际应用: 在开发过程中,往往因为表单出错而返回页面的时候填写的信息都不见了,为了支持页面回

关于表单序列化的三种方法

表单序列化: 方法1:serialize(): 就是把表单信息序列化成一个字符串 (认为最常用 的方法) <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $

jquery将表单序列化json对象

$.fn.serializeObject = function () { var obj = {}; var count = 0; $.each(this.serializeArray(), function (i, o) { var n = o.name, v = o.value; count++; obj[n] = obj[n] === undefined ? v : $.isArray(obj[n]) ? obj[n].concat(v) : [obj[n], v]; }); //obj.

jQuery实现form表单序列化转换为json对象功能示例

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery form序列化转换为json对象</title> <script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script> </script> </hea

待整理笔记(表单序列化操作、多态函数、对象的状态队列管理模式)

1.jquery的表单序列化操作 $('.form').serializeArray();通过serializeArray()方法得到表单form(class=“form”)的dom结点下所有含有name值的节点的value值的一个数组; 这个数组由多个对象构成,每个对象有name和value两个key值. 2.编程的多态性思想 利用函数的参数数组arguments,通过判断数组的长度来选择性执行某个功能: 例如: store: function(namespace, data, remove)

将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)

表单序列化类型的数据是指url传递的数据的格式,形如"key=value&key=value&key=value"这样的key/value的键值对.一般来说使用jQuery的$.fn.serialize函数能达到这样的效果.如何将这样的格式转化为对象? 我们知道使用jQuery的$.fn.serializeArray函数得到的是一个如下结构的对象 [ { name: "startTime" value: "2015-12-02 00:00:

jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).

Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src="jquery-1.3.1.js" type="text/javascript"></script> <script src="jquery.form.js" type="text/javascript"&g

jquery表单序列化

http://gongwen.sinaapp.com/article-206.html jquery表单序列化,数据格式转成json格式;用的时候直接$('#FormId').serializeJson();便可. 代码如下: //jquery插件把表单序列化成json格式的数据start (function($){ $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); var s

jquery将form表单序列化常json

var formData = {};$.each(form.serializeArray(),function(i, item){ formData[item.name] = item.value;}); $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#yourformid').serialize(),// 你的formid async: false, error: function(request) { al