3

对于此示例,假设我在表单中有一个月份列表,每个月份旁边都有一个复选框。我正在寻求帮助做以下两件事:

  1. 转换查询字符串(例如"January=on&March=on&September=on")或
  2. 转换对象映射:[{ January: 'on' },{ March: 'on' },{ September: 'on' }]

到单个 JSON 对象:{ January: 'on', March: 'on', September: 'on' }

我意识到第一个映射已经是 JSON,但我希望它不是对象数组,而是单个 JSON 对象。我可以用 构建地图,$('form').serializeArray();也可以用 构建查询字符串$('form').serialize();

jQuery API 中 .serialize() 的实现很简单:

serialize: function() {
    return jQuery.param(this.serializeArray());
},

这就是为什么我可以处理第一个或第二个答案。

我想这样做的原因是因为我正在从 PrototypeJS 切换到 jQuery,而在 PrototypeJS 中这很简单:

Object.toJSON(Form.serializeElements($('myform'), true));

那么,是否有人知道可以轻松做到这一点的 JSON 插件(我只想坚持使用 jQuery),或者知道实现我正在寻找的结果的简单方法?谢谢!

4

5 回答 5

10

你可以试试这个

String.prototype.QueryStringToJSON = function () {
href = this;
qStr = href.replace(/(.*?\?)/, '');
qArr = qStr.split('&');
stack = {};
for (var i in qArr) {
    var a = qArr[i].split('=');
    var name = a[0],
        value = isNaN(a[1]) ? a[1] : parseFloat(a[1]);
    if (name.match(/(.*?)\[(.*?)]/)) {
        name = RegExp.$1;
        name2 = RegExp.$2;
        //alert(RegExp.$2)
        if (name2) {
            if (!(name in stack)) {
                stack[name] = {};
            }
            stack[name][name2] = value;
        } else {
            if (!(name in stack)) {
                stack[name] = [];
            }
            stack[name].push(value);
        }
    } else {
        stack[name] = value;
    }
}
return stack;
}

请求参数

    href="j.html?name=nayan&age=29&salary=20000&interest[]=php&interest[]=jquery&interest[1]=python&interest[2]=Csharp&fan[friend]=rangan&fan[family]=sujan&sports[1]=cricket&sports[2]=football";

用法

alert(href.QueryStringToJSON().toSource())

输出

({name:"nayan", age:29, salary:20000, interest:["php", "python", "Csharp"], fan:{friend:"rangan", family:"sujan"}, sports:{1:"cricket", 2:"football"}})
于 2011-03-19T14:33:17.923 回答
4

kgiannakakis 的遍历地图的建议是一个很好的起点,尽管我不认为它可以作为我最初问题的答案。经过几个小时的头撞后,我解决了这个问题,它允许您基于自定义属性序列化元素(我不想满足于必须在我的表单元素上使用 'name' 属性,这是 jQuery 要求的)。我还开始使用来自 json.org 的 JSON 库来对我创建的对象进行字符串化。我的插件的serializeToJSON函数是我一直在寻找的问题的答案,其余的只是 exta。

注意:这是针对客户端的,因此“CustomXXX”名称和属性已替换为实际内容

jQuery.fn.extend({
    serializeCustomPropertyArray: function() {
        return this.map(function() {
            return this.elements ? jQuery.makeArray(this.elements) : this;
        }).filter(function() {
            return jQuery(this).attr('CustomAttribute') &&
                (this.checked || /select|textarea/i.test(this.nodeName) ||
                        /text|hidden|password|search/i.test(this.type));
        }).map(function(i, elem) {
            var val = jQuery(this).val();
            return val == null ? null : jQuery.isArray(val) ?
                jQuery.map(val, function(val, i) {
                    return { name: jQuery(elem).attr('CustomAttribute'), value: val };
                }) : { name: jQuery(elem).attr('CustomAttribute'), value: val };
        }).get();
    },
    serializeToJSON: function() {
        var objectMap = this.serializeCustomPropertyArray();
        var objectJson = new Object;
        jQuery.each(objectMap, function() {
            objectJson[this.name] = (this.value !== null) ? this.value : 'null';
        });
        return JSON.stringify(objectJson);
    }
});

这可以称为:

$('#fields').find(':input[CustomGroup="Months"]').serializeToJSON();

假设您的文档看起来像:

<div id="fields">
   <input type="checkbox" CustomGroup="Months" CustomAttribute="January" />January<br />
   <input type="checkbox" CustomGroup="Months" CustomAttribute="February" />February<br />
   ...
</div>

构建的 JSON 如下所示:

{ January: 'on', February: 'on', ... }
于 2009-04-26T01:24:33.697 回答
0

您可以使用$.each实用程序函数遍历对象映射。

$(function() {
    map = [{ January: 'on' },{ March: 'on' },{ September: 'on' }];
    $.each(map, function() {
       $.each(this, function(key, val) {alert(key + " = " + val);});;
    });
});

第一个 each 为您提供所有数组对象。使用第二个,您可以获得对象的键和值。

于 2009-04-25T22:05:48.103 回答
0

我知道您正在尝试将查询字符串转换为 JSON 对象,但也许您可能有兴趣直接从 html 表单转换为 JSON 对象(无需指定非常复杂的名称属性)。如果是这样,请查看 JSONForms: http ://code.google.com/p/jsonf/

免责声明:我开始了 jsonforms 项目。它还很年轻,但我个人认为它很摇滚!

于 2010-03-04T03:12:38.670 回答
0

您还可以使用parseQuery 插件从序列化元素创建对象。

var contact = $.parseQuery($("#step1 *").serialize());
于 2011-09-13T12:12:04.547 回答