web-dev-qa-db-ja.com

jQueryのデシリアライズフォーム

jQuery Serialize を使用してフォーム要素をシリアル化し、それらを逆シリアル化したいと考えています。残念ながら、機能するjQueryデシリアライザーが見つかりませんか？

javascriptjquerydeserialization
38
Tomas

JQuery Serializeの半分は param（） であるため、クエリ文字列を逆シリアル化するものの半分はdeparamになります。残念ながら、優れたスタンドアロンのデパラメータを見つけることができませんでした。今のところ jQuery BBQ library を取得して使用することをお勧めします。他のものが必要ない場合は削除できます。 Ben Alman（カウボーイ）がdeparamを独自のモジュールに抽出することを計画していることをどこかで読みました。

シリアル化解除の残りの部分では、deparamが返すオブジェクトをループし、オブジェクトの各キーと値のペアについてループし、キーに基づいてフォーム要素を選択し、フォーム要素の値を値に設定するだけです。

9
Benjamin Atkin

jQuery.deserialize のバージョンを作成しました。これは、serialize、serializeArray、serializeObject関数から生成されたシリアル化データをサポートします。また、チェックボックスやラジオボタンなど、すべてのフォーム要素タイプをサポートしています。

59
kflorence

これを試して：

function deparam(query) {
    var pairs, i, keyValuePair, key, value, map = {};
    // remove leading question mark if its there
    if (query.slice(0, 1) === '?') {
        query = query.slice(1);
    }
    if (query !== '') {
        pairs = query.split('&');
        for (i = 0; i < pairs.length; i += 1) {
            keyValuePair = pairs[i].split('=');
            key = decodeURIComponent(keyValuePair[0]);
            value = (keyValuePair.length > 1) ? decodeURIComponent(keyValuePair[1]) : undefined;
            map[key] = value;
        }
    }
    return map;
}
24
Jack Allan

私はJQuery.deserializeを試してみることに非常に興味がありましたが、チェックボックスをまったく処理していないようでしたので、目的を果たしませんでした。だから私は自分で書きました。 jQuery val（）関数がほとんどの作業を行うため、思ったよりも簡単であることがわかりました。

jQuery.fn.deserialize = function (data) {
    var f = this,
        map = {},
        find = function (selector) { return f.is("form") ? f.find(selector) : f.filter(selector); };
    //Get map of values
    jQuery.each(data.split("&"), function () {
        var nv = this.split("="),
            n = decodeURIComponent(nv[0]),
            v = nv.length > 1 ? decodeURIComponent(nv[1]) : null;
        if (!(n in map)) {
            map[n] = [];
        }
        map[n].Push(v);
    })
    //Set values for all form elements in the data
    jQuery.each(map, function (n, v) {
        find("[name='" + n + "']").val(v);
    })
    //Clear all form elements not in form data
    find("input:text,select,textarea").each(function () {
        if (!(jQuery(this).attr("name") in map)) {
            jQuery(this).val("");
        }
    })
    find("input:checkbox:checked,input:radio:checked").each(function () {
        if (!(jQuery(this).attr("name") in map)) {
            this.checked = false;
        }
    })
    return this;
};

これは次のように使用できるはずです。

$("#myform").deserialize(data);

データは、$（ "＃myform"）。serialize（）が生成するものなどのパラメーターリストです。

フォーム内のすべてのフィールドに影響し、データに含まれていないフィールドの値をクリアします。ただし、serialize関数の場合と同様に、特定のフィールドのみに影響を与えるセレクターを渡すこともできます。例えば。：

$("select").deserialize(data);
19
David Hammond

これに少し遅れましたが、誰かがこれを役に立つと思うかもしれません。

function fetchInput(identifier) {
    var form_data = identifier.serialize().split('&');
    var input     = {};

    $.each(form_data, function(key, value) {
        var data = value.split('=');
        input[data[0]] = decodeURIComponent(data[1]);
    });

    return input;
}
5
user3204597

私は今あなたの答えに答えていませんが、私の推測では、それをシリアル化してサーバーに送り返し、シリアル化されたデータを使用したいので、シリアル化を解除する必要がありますか？

その場合は、.serializeArray（）の使用を検討する必要があります。これをPOST ajaxのデータとして送信し、オブジェクトがあるため、後でアクセスすることもできます。

2
Pehmolelu

すべてが単一の文字列で必要で、多分COOKIEに保存でき、後で同じフォームを読み取って入力値を入力できます。

入力要素セパレーター： 〜（セパレータを使用）

入力属性セパレーター： |（セパレータを使用）

入力方式 | 入力名 | 入力値 〜 input2タイプ | input2名 | input2値

var formData = '';
$('#form_id').find('input, textarea, select').each(function(i, field) {
    formData += field.type+'|'+field.name+'|'+field.value+'~';
});

例：

hidden|vote_id|10~radio|option_id|~radio|option_id|427~radio|option_id|428~
0
Atul Yadav

標準のURLエンコード表記を削除する場合は、JavaScriptの decodeURIComponent（） を使用できます。これにより、次のように通常の文字列が得られます。

var decodedString = decodeURIComponent("Http%3A%2F%2FHello%3AWorld");
alert(decodedString);

この場合、decodedStringはHttp://Hello:Worldのようになります。これは working fiddle です。

この同じ問題をすべて検索して、ここで答えを見つけました： jQueryでURLをデコードするにはどうすればよいですか？

これは古い質問であることがわかっていますが、jQuery deserializeを検索することでここに来ることができたので、同じ問題を抱える人々にこの問題について別のアプローチを試みたいと思います。

0
LasagnaAndroid

Jack Allanのdeparam関数をjQueryで使用すると、次の行を変更できます。

map[key] = value;

に

$('input[name=' + key + ']').val(value);

これにより、データがフォームフィールドにロードされます。

0
Phil LaNasa

このコードは、シリアル化された文字列で同じキーが複数回検出されたときに配列を返します


    chaine="single=Single1&multiple=Multiple&multiple=Multiple1&multiple=Multiple2&multiple=Multiple3&check=check2&radio=radio1"
    function deserialize(txt){
    myjson={}
    tabparams=chaine.split('&')
    var i=-1;
    while (tabparams[++i]){
    tabitems=tabparams[i].split('=')
    if( myjson[decodeURIComponent(tabitems[0])] !== undefined ){
        if( myjson[decodeURIComponent(tabitems[0])] instanceof Array ){
            myjson[decodeURIComponent(tabitems[0])].Push(decodeURIComponent(tabitems[1]))
        }
    else{
       myjson[decodeURIComponent(tabitems[0])]= [myjson[decodeURIComponent(tabitems[0])],decodeURIComponent(tabitems[1])]
            }
        }
    else{
         myjson[decodeURIComponent(tabitems[0])]=decodeURIComponent(tabitems[1]);
        }
    }
    return myjson;
    }
0
Spacefrog

少し遅れるかもしれませんが、おそらく JQuery.deserialize のようなものを探しているでしょう。問題：チェックボックスまたはラジオボタンのサポートなし。

0
Ivan