如何在一个请求中以多种形式发送数据？

Question

我的网站上有一个表单，可以在其中单击“添加行”按钮动态添加内联表单。 当用户单击“提交”按钮时，我想发送请求中创建的所有表单中的数据，而不仅仅是第一个表单（与当前解决方案一样）。 我该怎么办？ 我猜这需要一些AJAX和JQuery魔术吗？ 我可以以某种方式在用户每次创建新表单并输入内容，序列化整个内容并随请求一起发送时附加表格的值吗？ 我是Web开发的新手，我不确定如何做到这一点。 最终目标是将表单中的数据存储在数据库中。

我的代码如下所示：

main.html：

@app.route('/entries', methods=['GET', 'POST'])
def add_entry():
  if request.method == 'POST':
    print request.form['entry']
  return render_template('add_entry.html')

add_entry.html：

<form action="{{ url_for('add_entry') }}" method=post class="form-inline" role="form" id="entry_form">
  <div class="form-group">
    <input type="entry" class="form-control" name="entry" placeholder="new entry" value="{{ request.form.entry }}">
  </div>

  <div class="form-group">
    <button type="button" class="btn addButton">Add</button>
  </div>

  <div class="form-group">
    <button type="submit" class="btn submitButton">Submit</button>
  </div>
</form>

<form action="{{ url_for('add_entry') }}" method=post class="form-inline hide" role="form" id="entriesTemplate">
  <div class="form-group">
    <input type="entry" class="form-control" name="entry" placeholder="new entry" value="{{ request.form.entry }}">
  </div>

  <div class="form-group">
    <button type="button" class="btn removeButton">Remove</button>
  </div>
</form>

form.js：

$(document).ready(function() {
$('.addButton').click(function(){
    $('#entriesTemplate')
        .clone()
        .removeClass('hide')
        .removeAttr('id')
        .prependTo("#entry_form");
});

Answer 1

<form>
    <input type="text" name="name" value="Leo" />
    <input type="text" name="age" value="20" />
    <input type='submit' />
</form>
<form>
    <input type="text" name="name" value="John" />
    <input type="text" name="age" value="25" />
    <input type='submit' />
</form>

$("form").submit(function (e) {
    e.preventDefault();
    var data_array = $("form").map(function(){
        return $(this).serializeArray();
    });
    $.ajax({
        url:'ajax.php',
        data:data_array,
        success:function(html){

        }
    });
});

试试吧

http://jsfiddle.net/e62hxjzu/

Answer 2

我假设您正在动态创建的每种表单都只有一个input class “ form-control”。 如果要在执行ajax请求之前收集所有这些值，则可以查询这些元素并将其附加到一个字符串中。 我基于您的代码创建了一个示例，该示例仅记录表单中所有输入的值。 相关代码段：

 $( '.form-control' ).each(function( index ) {
    console.log($( this ).val() ); 
 });

而已。 您是否拥有此字符串或数组，取决于您如何存储它。 您可以将其传递到ajax请求的data元素中，您应该会很好。 希望它为您指明正确的方向。

Answer 3

我认为您可以使用JQuery和Ajax做到这一点。 这是一个例子。 add_entry.html：

<div class="form">
  <div class="row-container">

  </div>
  <div class="form-group">
    <input type="entry" class="form-control init-row" name="entry" placeholder="new entry" value="">
  </div>

  <div class="form-group">
    <button type="button" class="btn addButton">Add</button>
  </div>

  <div class="form-group">
    <button type="button" class="btn submitButton">Submit</button>
  </div>
</div>

form.js：

$(document).ready(function() {
  function  getAllRow(){
     var rows=[];
     $('.new-row').each(function () {
     var row={};
     row.rowvalue = $(this).val();
     rows.push(row);
   })
   return rows;
   }

  $('.addButton').click(function(){
       var init_row_value=$('.init-row').val();
       $('.row-container').append('<input class="new-row" value="'+ init_row_value +'"  disabled>');
    });

   $('.submitButton').click(function(){
     var allRowData = getAllRow();
    $.ajax({
      type: "POST",
      url: "allSubmit.php",
      data: allRowData 
    })
   });


});

您将在服务器端获取日期作为“行值”列表