jQuery - 我可以从序列化的表单字符串中填写表单输入吗？答案

【问题标题】：jQuery - can I fill form inputs from a serialized form string?jQuery - 我可以从序列化的表单字符串中填写表单输入吗？
【发布时间】：2011-11-19 23:54:12
【问题描述】：

鉴于我在页面上有一些表单，我知道我可以使用 unicode 序列化字符串

var query = jQuery('#some-form').serialize();

也可以使用$('#some-input').val(...) 设置每个输入的值。假设上面的相同表单已重置，但我仍然有查询字符串 - 是否有一种简单的方法可以从该字符串填充表单？我意识到我可以解析它并单独设置每个输入/选择，但我正在寻找一个更简单的解决方案。谢谢。

【问题讨论】：

我们可以做一些像 jQuery('#FormID').val(earlySerializedState);.. 期望根据 serializedState 变量填充所有表单字段的事情吗？..

标签： jquery query-string form-fields auto-populating form-processing

【解决方案1】：

您可以将表单序列化为 JSON 数组，并使用像 Knockout.js 这样的 MVVM 映射插件来自动填写表单。

见Serializing to JSON in jQuery

【讨论】：

【解决方案2】：

jquery.deserialize plugin 应该可以帮到你。

【讨论】：

刚刚尝试过，但它似乎不适用于多个选择输入。谢谢！

【解决方案3】：

如果你的表单只包含文本输入（不是数组），你可以试试这个插件，我改编自它的反序列化函数对应物（https://gist.github.com/rcmachado/242617#file-jquery-unserialize-js），但它不是返回一个对象，而是填充它的表单适用于。

(function($){
    $.fn.fillformwithserialized = function(serializedString) {
        var str = decodeURI(serializedString);
        var pairs = str.split('&');
        var p, idx, val;
        for (var i=0, n=pairs.length; i < n; i++) {
            p = pairs[i].split('=');
            idx = p[0];

            var txtBox = this.find('#' + idx + ':input');
            if (txtBox.is(":text")) {
                txtBox.val(p[1]);
            }
        }

        return this;
    };
})(jQuery);

使用示例：

var dataSerialised = sessionStorage.getItem('frmVeryImportantStuff');

if (dataSerialised == null || !confirm("We could restore the previous version of the form you posted. Shall we?"))
return false;
else {
    $("#frmVeryImportantStuff").fillformwithserialized(dataSerialised);
}

显然，您首先需要将表单保存在 sessionStorage 中。示例：

sessionStorage.setItem("frmVeryImportantStuff", $(frmVeryImportantStuff).serialize());

【讨论】：