使用ajax提交多个字段数据

Submitting multiple fields data with ajax

本文关键字：字段 数据 ajax 提交 使用      更新时间：2023-09-26

所以我有这个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:它实际上是每行两个文本框，所以当用户单击"添加更多"时，它会同时附加两个文本框(属性名称和属性类型)，fiddle只有属性名称。
谢谢。

使用序列化jQuery函数:http://api.jquery.com/serialize/

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

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

你的代码有一些问题

  1. ID是唯一的，每页只有一次
  2. 你的HTML是无效的- ul标签应该只有li标签
  3. 如果你想使用.serialize方法，你的input必须有name属性

但是如果我们忘记这个bug，这里是解决方案:

$('input[name=submit]').click(function () {
    var data = $('#variants .prop_name').serialize();
    console.log(data);
});
<<p> jsFiddle代码/strong>
相关文章：