使用jquery获取form中的所有参数(模拟post同步提交)

项目中有需求要ajax异步提交页面数据, 通过jquery原生的serialize和serializeArray方法发现获取的结构有点"js", 后端还需要经过一层处理, 于是手撸了一个获取表单数据的方法, 该方法支持数组、多级等复杂结构, 使得获取数据更加类似原生同步提交form表单时的数据结构.

页面示例:

Html结构:

调用结果如下:

代码

// 调用: var searchData = YForm.getDataBySelector('#show_where');
var YForm = {
    getDataBySelector: function (selector) {
        var data = {};
        $(selector).find('input,select,textarea').each(function(a,b){
            var name = $(this).attr('name');
            var value = $(this).val();
            if (!name) return ;

            // name去除括号
            name = name.replace(/\]/g, "");
            var nameArr = name.split("[");

            var setValueFun = function (data, keyArr, value) {
                var nowKey = keyArr.shift();
                if (nowKey === '') { // 自增数组
                    if (JSON.stringify(data) === '{}') data = [];
                    var j = 0;
                    while (true) {
                        if (typeof data[j] === "undefined") {
                            data[j] = value;
                            break;
                        }
                        j++;
                    }
                    return data;
                } else if (keyArr.length > 0) {
                    if (typeof data[nowKey] === "undefined") {
                        data[nowKey] = {};
                    }
                    data[nowKey] = setValueFun(data[nowKey], keyArr, value);
                    return data;
                } else {
                    data[nowKey] = value;
                    return data;
                }
            };

            data = setValueFun(data, nameArr, value);
        });
        return data;
    }
};