使用ajax更新记录时遇到问题（表单提交倍数）

Question

我使用L5和ajax在单页上执行CRUD。虽然我已经用ajax jquery完成插入，删除和显示数据，但是当我尝试编辑任何记录时，我的表单多次提交，我总是遇到麻烦。我不知道我的代码有什么问题。下面是我的代码。

<form class="form-inline" id="testForm" role="form" method="POST"
   action="{{action('TestController@store')}}">
   <input type="hidden" name="_token" value="">
   <div class="form-group">
      <label class="col-md-4 control-label">Test Name</label>
      <div class="col-md-6">
         <input type="text" class="form-control" name="name" value="">
      </div>
   </div>
   <div class="form-group">
      <div class="col-md-6 col-md-offset-4">
         <button type="submit" name="frmButton" class="btn btn-primary"
            style="margin-right: 15px;">
         submit
         </button>
      </div>
   </div>
</form>
<table class="table">
   <thead>
      <tr>
         <th>Name</th>
         <th>Action</th>
      </tr>
   </thead>
   <tbody id="view">
   </tbody>
</table>

我的jquery代码如下：

$(document).ready(function () {
            $.ajax({
                url: '/tests',
                type: 'GET',
                success: function (data, textStatus, jqXHR) {
                    var row = '';
                    $.each(data, function (i, item) {
                        row += '<tr><td>' + item.name + '</td><td>' + '<button class="btn btn-xs btn-info editTest" title="edit" data-id="' + item.id + '">edit</button>' + ' <button class="btn btn-xs btn-danger deleteTest" title="delete" data-toggle="modal" data-target="#myModal" data-id="' + item.id + '">Delete</button></td></tr>';
                    });
                    $('#view').html('');
                    $('#view').append(row);
                }
            }).then(function () {
                $('#testForm').submit(function (event) {
                    event.preventDefault();
                    $('#errorContainer').addClass('hide');
                    var type = $(this).attr('method');
                    var action = $(this).attr('action');
                    var data = $(this).serializeArray();
                    $.ajax({
                        url: action,
                        type: type,
                        data: data,
                        dataType: "json",
                        success: function (data, textStatus, jqXHR) {
                            var row = '<tr><td>' + data.name + '</td><td>' + '<button class="btn btn-xs btn-info editTest" title="edit" data-id="' + data.id + '">edit</button>' + ' <button class="btn btn-xs btn-danger deleteTest" title="delete" data-toggle="modal" data-target="#myModal" data-id="' + data.id + '">Delete</button></td></tr>';
                            $('#view').append(row);
                            $('#testForm').trigger('reset');

                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            var errors = jqXHR.responseJSON;
                            $('#errorBag').html('');
                            $.each(errors, function (index, value) {
                                $('#errorContainer').removeClass('hide');
                                $('#errorBag').append('<li>' + value + '</li>');
                            });
                        }
                    });
                });
            });
        });

        $(document).on('click', '.deleteTest', function () {
            var result = confirm('Are you sure want to delete this record?');
            if (result == true) {
                var id = $(this).attr('data-id');
                var Delete = $(this).parent().parent();
                $.ajax({
                    url: 'test/' + id,
                    type: "DELETE",
                    data: id,
                    dataType: "json",
                    success: function (data, textStatus, jqXHR) {
                        Delete.remove();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            }
        });

        $(document).on('click', '.editTest', function () {
            var id = $(this).attr('data-id');
            $.ajax({
                url: 'test/' + id,
                type: "PUT",
                dataType: 'json',
                success: function (data, textStatus, jqXHR) {
                    var This = $('#testForm');
                    This.attr('action', 'test/' + data[0].id);
                    This.attr('method', 'PATCH');
                    $('input[name="name"]').attr('value', data[0].name);
                    $('button[name="frmButton"]').text('update');
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(textStatus);
                }
            }).then(function () {
                $('#testForm').submit(function (event) {
                    event.preventDefault();
                    $('#errorContainer').addClass('hide');
                    var Type = $(this).attr('method');
                    var Action = $(this).attr('action');
                    var Data = $(this).serializeArray();
                    $.ajax({
                        url: Action,
                        type: Type,
                        data: Data,
                        dataType: "json",
                        success: function (data, textStatus, jqXHR) {
                            console.log('call');
                            var This = $('#testForm');
                            This.attr('action', '{{action('TestController@store')}}');
                            This.attr('method', 'POST');
                            $('input[name="name"]').attr('value', '');
                            $('button[name="frmButton"]').text('add');
                            var row = '<tr><td>' + data.name + '</td><td>' + '<button class="btn btn-xs btn-info editTest" title="edit" data-id="' + data.id + '">edit</button>' + ' <button class="btn btn-xs btn-danger deleteTest" title="delete" data-toggle="modal" data-target="#myModal" data-id="' + data.id + '">Delete</button></td></tr>';
                            $('#view').append(row);
                            $('#testForm').trigger('reset');
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            var errors = jqXHR.responseJSON;
                            $('#errorBag').html('');
                            $.each(errors, function (index, value) {
                                $('#errorContainer').removeClass('hide');
                                $('#errorBag').append('<li>' + value + '</li>');
                            });
                        }
                    });
                });
            });
        });