如何在一个请求中发送来自多个表单的数据

How to send data from multiple forms in one request?

本文关键字：数据 表单 请求 一个      更新时间：2023-09-26

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

我的代码如下：

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");
});

<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/

我假设您正在动态创建的每个表单只有一个input元素和class:'form control'。如果您想在执行ajax请求之前收集所有这些值，您可以查询这些元素并将它们附加到一个字符串中。我创建了一个示例，它完全基于您的代码，只记录表单中所有输入的值。相关代码片段：

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

就是这样。你有这个字符串还是数组，取决于你如何存储它。你可以把它传递到ajax请求的data元素中，然后就可以开始了。希望它能为你指明正确的方向。

我认为您可以使用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 
    })
   });

});

您将在服务器端获得作为"rowvalue"列表的日期

相关文章：