javascript - 执行存储方法时出现 Ajax CRUD 错误

Question

您好，每当我执行存储功能时，我都会在ajax中收到此错误

这是我的 Controller :

public function store_batch(Request $request)
{
    $rules = array(
        'batch_name'=>'required:max:20|unique:batches,batch_name',

      );
    $validator = Validator::make ( Input::all(), $rules);
    if ($validator->fails()){
       return Response::json(array('errors'=> $validator->getMessageBag()->toarray()));
    } else {
        $batchs= new Batch();
        $batchs->batch_name=$request->input('batch_name');
        $batchs->save();

        return response()->json($batchs);
     }

}

这是我的观点:

<div class="form-group row add">
   <div class="col-md-8">
      <input type="text" class="form-control" id="batch_name" name="batch_name"
         placeholder="Enter some name" required>
      <p class="error text-center alert alert-danger" hidden></p>
   </div>
   <div class="col-md-4">
      <button class="btn btn-primary" type="submit" id="add">
      <span class="glyphicon glyphicon-plus"></span> ADD
      </button>
   </div>
</div>
{{csrf_field()}}
<div class="table-responsive text-center">
   <table class="table table-borderless" id="table">
      <thead>
         <tr>
            <th class="text-center">#</th>
            <th class="text-center">Name</th>
            <th class="text-center">Actions</th>
         </tr>
      </thead>
      @foreach($batchs as $batch)
      <tr class="batch{{$batch->id}}">
         <td>{{$batch->id}}</td>
         <td>{{$batch->batch_name}}</td>
         <td><button class="edit-modal btn btn-info" data-id="{{$batch->id}}"
            data-name="{{$batch->batch_name}}">
            <span class="glyphicon glyphicon-edit"></span> Edit
            </button>
            <button class="delete-modal btn btn-danger"
               data-id="{{$batch->id}}" data-name="{{$batch->batch_name}}">
            <span class="glyphicon glyphicon-trash"></span> Delete
            </button>
         </td>
      </tr>
      @endforeach
   </table>
</div>
</div>
</div>

这是我的 JavaScript:

<script>
    $(document).ready(function() {
    $(document).on('click', '.edit-modal', function() {
        $('#footer_action_button').text("Update");
        $('#footer_action_button').addClass('glyphicon-check');
        $('#footer_action_button').removeClass('glyphicon-trash');
        $('.actionBtn').addClass('btn-success');
        $('.actionBtn').removeClass('btn-danger');
        $('.actionBtn').addClass('edit');
        $('.modal-title').text('Edit');
        $('.deleteContent').hide();
        $('.form-horizontal').show();
        $('#fid').val($(this).data('id'));
        $('#n').val($(this).data('name'));
        $('#myModal').modal('show');
    });
    $(document).on('click', '.delete-modal', function() {
        $('#footer_action_button').text(" Delete");
        $('#footer_action_button').removeClass('glyphicon-check');
        $('#footer_action_button').addClass('glyphicon-trash');
        $('.actionBtn').removeClass('btn-success');
        $('.actionBtn').addClass('btn-danger');
        $('.actionBtn').addClass('delete');
        $('.modal-title').text('Delete');
        $('.did').text($(this).data('id'));
        $('.deleteContent').show();
        $('.form-horizontal').hide();
        $('.dname').html($(this).data('batch_name'));
        $('#myModal').modal('show');
    });

    $('.modal-footer').on('click', '.edit', function() {

        $.ajax({
            type: 'post',
            url: '/setup/batch/edit',
            data: {
                '_token': $('input[name=_token]').val(),
                'id': $("#fid").val(),
                'batch_name': $('#n').val()
            },
            success: function(data) {
                $('.item' + data.id).replaceWith("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.batch_name + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-name='" + data.batch_name + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-name='" + data.batch_name + "' ><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
            }
        });
    });
    $("#add").click(function() {

        $.ajax({
            type: 'post',
            url: '/setup/store',
            data: {
                '_token': $('input[name=_token]').val(),
                'batch_name': $('input[name=batch_name]').val()
            },
            success: function(data) {
                if ((data.errors)){
                  $('.error').removeClass('hidden');
                    $('.error').text(data.errors.batch_name);
                }
                else {
                    $('.error').addClass('hidden');
                    $('#table').append("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.batch_name + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-name='" + data.batch_name + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-name='" + data.batch_name + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
                }
            },

        });
        $('#name').val('');
    });
    $('.modal-footer').on('click', '.delete', function() {
        $.ajax({
            type: 'post',
            url: '/demo/delete',
            data: {
                '_token': $('input[name=_token]').val(),
                'id': $('.did').text()
            },
            success: function(data) {
                $('.item' + $('.did').text()).remove();
            }
        });
    });
});

</script>

Answer 1

如果您没有定义正确的路线，则可能会出现此错误

或者，如果您使用 post 请求调用 get 路由。 另外，您无法仔细检查 URL 和方法。

您还可以检查浏览器开发人员区域的“网络”选项卡。