Javascript 使用AJAX按ID提交多个表单

我希望使用AJAX按ID提交多个表单，使用下面的jQuery查找并生成ID。当然，每个表单都有各自唯一的ID，当前由变量i创建

     <script>
$(document).on('click', '#button', function() {

    var wrap = $(this).closest('div.form_wrap');

    wrap.find('form').each(function() {
        var id = $(this).prop('id');
        var i = $('#'+id);
        console.log(i);
    });

});
</script> 

$（文档）。在（'单击'，'按钮'，函数（）上）{
var wrap=$（this）.closest（'div.form_wrap'）；
wrap.find（'form'）。每个（函数（）{
var id=$（this.prop（'id'）；
变量i=$（“#”+id）；
控制台日志（i）；
});
});

HTML

<?php $f = 0;?>  
@foreach ($workouts as $workout)
<?php $formid="form_".$x."_".$f;?>
{!! Form::open(array('route' => 'workoutshared.store', 'method' => 'POST', 'ID' => $formid)) !!}
    {{ csrf_field() }}
    {{ Form::hidden('user_id', Auth::user()->id)}}
    {{ Form::hidden('date', $entry)}}
    {{ Form::hidden('weight', $workout->weight)}}
    {{ Form::hidden('exercise', $workout->exercise)}}
    {{ Form::hidden('reps', $workout->reps)}}
    {{ Form::hidden('sets', $workout->sets)}}              
    {{ Form::checkbox('share', 1, array('class' => 'form-control'))}}
{!! Form::close() !!}     
    <tr>
        <th>{{$workout->exercise}}</th>
        <td>{{$workout->weight}}</td>
        <td>{{$workout->reps}}</td>
        <td>{{$workout->sets}}</td>
    </tr>

<?php $f++; endforeach;?>

@foreach（$训练作为$训练）
{！！Form:：open（数组（'route'=>'workoutshared.store'，'method'=>'POST'，'ID'=>$formid））
{{csrf_field（）}}
{{Form:：hidden（'user_id'，Auth:：user（）->id）}
{{Form:：hidden（'date'，$entry）}
{{Form:：hidden（'weight'，$workout->weight）}
{{Form:：hidden（'exercise'，$workout->exercise）}
{{Form:：hidden（'reps'，$workout->reps）}
{{Form:：hidden（'set'，$workout->set）}
{{Form:：checkbox（'share'，1，array（'class'=>'Form control'））}
{！！Form:：close（）！！}
{{$workout->exercise}
{{$workout->weight}
{{$workout->reps}
{{$workout->set}

更新

<script>
$(document).on('click', '#button', function() {

    var wrap = $(this).closest('div.form_wrap');

    wrap.find('form').each(function() {
        var id = $(this).prop('id');
        var i = $('#'+id);
        console.log(i);
        $(i).submit(function() {
        var that = $(this),
            url = that.attr('action'),
            type = that.attr('method'),
            data = {};

        that.find('[name]').each(function(index, value) {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();

            data[name] = value;
        });

        $.ajax({
            url: url,
            type: type,
            data: data,
            success: function(response) {
                console.log(response);
            }
        });

        return false;
    });
    });

});

</script>

$（文档）。在（'单击'，'按钮'，函数（）上）{
var wrap=$（this）.closest（'div.form_wrap'）；
wrap.find（'form'）。每个（函数（）{
var id=$（this.prop（'id'）；
变量i=$（“#”+id）；
控制台日志（i）；
$（i）.提交（函数（）{
var that=$（此），
url=that.attr（'action'），
type=that.attr（'method'），
数据={}；
that.find（'[name]'）。每个（函数（索引，值）{
var that=$（此），
name=that.attr（'name'），
value=that.val（）；
数据[名称]=值；
});
$.ajax({
url:url，
类型：类型，
数据：数据，
成功：功能（响应）{
控制台日志（响应）；
}
});
返回false；
});
});
});

您可以使用以下方式提交所有表格：

wrap.find('form').each(function() {
var id = $(this).attr('id');
var i = $('#'+id);
  $(i).submit(function() {
        var that = $(this),
            url = that.attr('action'),
            type = that.attr('method'),
            data = {};

        that.find('[name]').each(function(index, value) {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();

            data[name] = value;
        });

        $.ajax({
            url: url,
            type: type,
            data: data,
            success: function(response) {
                console.log(response);
            }
        });

        return false;
    });
});

显然，使用该方法会获取表单中已经使用的数据，并使用当前方法将其提交给当前操作

因此，如果您使用GET和POST以及不同的提交位置（操作），这基本上是可行的

---

编辑：我还根据jquery文档将.prop（）更改为.attr（）。在这种情况下，prop（）的用法不正确。

您的HTML在哪里？具体的问题和问题是什么？请注意，

不能是

的兄弟姐妹。。。这是无效的，因为我对AJAX的使用经验很少，希望使用jQuery变量i生成的ID提交表单。将有一个可变数量的表格。谢谢你的答复，但它是失败的。你能看看为什么会这样吗？为什么会失败？发生了什么事？是否有任何控制台错误？控制台中没有任何错误。我认为jQuery一开始可能会失败。没有任何文档或按

$（文档）单击#按钮。on（'click'，'#按钮'，function（）{var wrap=$（this）。closest（'div.form#wrap'）；wrap.find（'form'）。each（function（）{var id=$（this.attr（'id'）；var i=$（'#id））；console.log（i）}）

我尝试过修改你的代码，但没有成功。我会将

$（I）.on（'submit'，function（）{

更改为

$（I）.submit（function（）{

如果你在onclick中使用它，但仍然失败，它正在正确地通过变量。这可能是URL或类型的问题。我已经发布了更新。