3

この例では、フォームに月のリストがあり、それぞれの横にチェックボックスがあるとします。次の 2 つのことのいずれかを行うためのヘルプを探しています。

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

これが、最初または2番目の答えのいずれかを処理できる理由です。

私がこれをやりたい理由は、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 の提案は良い出発点でした。数時間頭を悩ませた後、私はこれに落ち着きました。これにより、カスタム属性に基づいて要素をシリアル化できます (jQuery が必要とするフォーム要素で 'name' 属性を使用しなければならないことで解決したくありませんでした) ）。また、作成したオブジェクトを文字列化するために、json.org の JSON ライブラリを使用し始めました。私のプラグインのserializeToJSON関数は、私の質問への回答として探していたものです。残りは単なる追加です。

注: これはクライアント用であるため、'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

parseQueryプラグインを使用して、シリアル化された要素からオブジェクトを作成することもできます。

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

$.eachユーティリティ関数を使用して、オブジェクト マップをトラバースできます。

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

最初のそれぞれは、すべての配列オブジェクトを取得します。2 番目のものを使用すると、オブジェクトのキーと値を取得できます。

于 2009-04-25T22:05:48.103 に答える
0

クエリ文字列を JSON オブジェクトに変換しようとしていることは知っていますが、(複雑な名前属性を指定することなく) html フォームから JSON オブジェクトに直接変換することに興味があるかもしれません。その場合は、JSONForms をチェックしてください: http://code.google.com/p/jsonf/

免責事項: jsonforms プロジェクトを開始しました。まだ若いですが、個人的にはかっこいいと思います！

于 2010-03-04T03:12:38.670 に答える