Question

我正在寻找一种更好的方法来使用输入对序列化表单;一个输入用于键，另一个用于值。无论谁使用此表单，都可以选择添加更多键值输入对。

我目前有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 ...

Answer 1

您可以使用.serialize：

.serialize（）方法以标准URL编码方式创建文本字符串符号。它可以作用于已选择个体的jQuery对象表单控件，例如＆lt; input＆gt;，＆lt; textarea＆gt;和＆lt; select＆gt;

示例：

$('#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/

使用动态密钥序列化表单

1 个答案: