Question

所以我有http://jsfiddle.net/barmar/mDfQT/10/

$('.add_options').on('click', function () {
    $('#variants').append('<div class="some_id"><input type="text" id="prop_name" class="prop_name" placeholder="Property name"><a href="#" class="remover">Remove</a></div>');
    var size = parseInt($('#variants').attr("data-size"), 10) + 1;
    $('#variants').attr("data-size", size);
    $("#count").text(size);
});
$('#variants').on('click', '.remover', function () {
    $(this).closest('.some_id').hide();
    var size = parseInt($('#variants').attr("data-size"), 10) - 1;
    $('#variants').attr("data-size", size);
    $("#count").text(size);
});

用户可以在用户完成更新字段值（数字n）后添加任意数量的字段，我想使用ajax提交数据。我的问题是，什么是从所有文本框中获取数据的最有效方法，同时保持每个数据字段可区分（这样我可以更新我的数据库）。 Ps：实际上每行有两个文本框，所以当用户点击添加更多时，它会同时附加两个texbox（属性名称和属性类型），小提琴只有属性名称。
感谢。

Answer 1

使用serialize jQuery函数：http://api.jquery.com/serialize/

将输入包装在表单中，然后您可以提交序列化数据并发布您的ajax。

var dataToBeSubmitted = $('form').serialize()

Answer 2

您的代码中存在一些问题

ID是唯一的，每页只有一次
您的HTML无效 - ul标记shoud只有li标记
如果您想使用.serialize方法，则input必须具有name属性

但如果我们忘记这些错误就是解决方案：

$('input[name=submit]').click(function () {
    var data = $('#variants .prop_name').serialize();
    console.log(data);
});

<强> jsFiddle code

使用ajax提交多个字段数据

2 个答案: