使用动态键序列化表单答案

【问题标题】：Serializing a form with dynamic keys使用动态键序列化表单
【发布时间】：2013-11-21 15:35:23
【问题描述】：

我正在寻找一种更好的方法来序列化带有输入对的表单；一个输入用于键，另一个用于值。使用此表单的任何人都可以选择添加更多键值输入对。

我目前有this fiddle 来序列化表单，但我不相信这是最好/最佳/可读的方式。是否有任何我缺少的库或方法可以使这段代码更好？

代码如下：

HTML：

<div>
    <form>
        <span>
            <input type="text" class="key" id="key1"/><input type="text" class="value" id="value1"/>
        </span>
    </form>
</div>
<a href="#" id="add">Add</a>
<a href="#" id="serialize">Serialize</a>
<div id="serialized-string"></div>

JavaScript：

$(document).ready(function(){
    var numberOfPairs = $('.key').length;
    $('#add').on('click', function () {
        numberOfPairs += 1;
        $('div > form').append('<span><input type="text" class="key" id="key'+numberOfPairs+'"/><input type="text" class="value" id="value'+numberOfPairs+'"/></span>'); 
    });
    $('#serialize').on('click', function () {
        var serialized = "";
        for(var x = 1; x <= numberOfPairs; x +=1) {
            var keyValuePair = $('#key'+x).val() + "=" + $('#value'+x).val();
            if(serialized.length > 0) {
                serialized += "&" + keyValuePair;               
            } else {
                serialized += keyValuePair;
            }
        }
        alert(serialized);
    });  
});

和 CSS

span {
    display: block;
}

另外，我不确定是否应该将其正确编码为 URI...

【问题讨论】：

标签： javascript jquery forms serialization

【解决方案1】：

你可以使用.serialize:

.serialize() 方法以标准 URL 编码创建文本字符串符号。它可以作用于已选择个人的 jQuery 对象表单控件，例如、和 <select></select>

例子：

$('#serialize').on('click', function () {
    alert($('form').serialize());
});

但这假设您已经为表单元素提供了名称。

<input type="text" class="key" name="key1" id="key1"/><input type="text" class="value" id="value1" name="key2" />**strong text**

见http://jsfiddle.net/s2tyS/1/

【讨论】：