javascript - 如何通过多次提交和 Laravel 路由处理 AJAX 表单提交

Question

下面的表单不会提交到数据库。如果我运行 jQuery 到注释掉的第一个提交，第一个表单就会提交，但我显然需要使用 AJAX 继续提交表单。该过程似乎失败于:

 $(i).submit(function(event) {

谁能指出我哪里出错了？

jQuery/AJAX

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

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

wrap.find('form').each(function() {
    var id = $(this).prop('id');
    var arr = jQuery.makeArray( "#"+id );
    var url = $(this).attr('action');
    var type = $(this).attr('method');
    var i = $('#'+id);
    //var data = $(i).serialize();
    //$(i).submit();

    console.log(url);
    console.log(type);


    $(i).submit(function(event) {

        var data = {
            'name'    : $('input[name=weight]').val(),
            'reps'    : $('input[name=reps]').val(),
            'sets'    : $('input[name=sets]').val()
        };

        $.ajax({
            type        : type, 
            url         : url, 
            data        : data,
            dataType    : 'json', 
            encode      : true
        })

            .done(function(data) {              
                console.log(data);         
            });  
        event.preventDefault();
    })
});
});

HTML

<?php $workouts = DB::table('workouts')->where('date', $entry->format('Y-m-d'))->where('user_id', Auth::user()->id)->get(); ?>
                                    <?php $f = 0;?>  
                                        @foreach ($workouts as $workout)
                                        <?php $formid="form_".$x."_".$f;?>
                                        {!! Form::open(array('route' => 'w_shared', '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;?>

路线

Route::post('/w_shared', [
    'as' => 'w_shared',
    'uses' => 'WController@store' 

]);

谢谢

Answer 1

在调用提交表单之后添加提交函数。此外，您不必要地重新选择元素，并且您可能还想确定数据收集的范围:

$(document).on('click', '#button', function() {
  var wrap = $(this).closest('div.form_wrap');
  wrap.find('form').each(function() {

      var id = $(this).prop('id');
      var arr = jQuery.makeArray( "#"+id );
      var url = $(this).attr('action');
      var type = $(this).attr('method');
      var i = $('#'+id); // Or just $(this)
      var data = i.serialize();

// setup on submit 
      i.submit(function(event) {
	event.preventDefault();
	var formElem = $(event.currentTarget);
          
          var data = {
              'name'    : formElem.find('input[name=weight]').val(),
              'reps'    : formElem.find('input[name=reps]').val(),
              'sets'    : formElem.find('input[name=sets]').val()
          };

          $.ajax({
              type        : type, 
              url         : url, 
              data        : data,
              dataType    : 'json', 
              encode      : true
            })
              .done(function(data) {              
                  console.log(data);         
              });     
	});

// submit form
	i.submit();
  });

});

您可能还想探索将 onSubmit 方法声明的设置移到 onClick 方法之外，并替换:

.submit(function(){...})

与:

.on('submit', function(){...})