执行存储方法时出现Ajax Crud错误 [英] Ajax crud error while performing store method
本文介绍了执行存储方法时出现Ajax Crud错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，每当我执行存储功能
Hello i'm getting this error in ajax whenever i perform store function
这是我的控制器:
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:
here is my 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>
推荐答案
如果您没有定义正确的Route，则可能会出现此错误
This error might be possible if you have not define proper Route
或者如果您通过post请求调用get路由.
另外，您不能再次检查URL和方法.
Or if you are calling the get route with post request.
Also, you can't double check the URL and Method.
您还可以检查浏览器开发人员区域的网络"选项卡.
You can also check the Network Tab of your browser developer area.
这篇关于执行存储方法时出现Ajax Crud错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
