我有一个 Laravel 5.8 项目,我想将 Ajax 用于我的 CRUD,当然我使用数据表。它工作正常,我成功地将数据保存在数据库中,但有两个问题。我先给你看一下代码。
这是我的Controller:
<?php
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Restaurant;
use App\Kitchen;
use Validator;
class RestaurantsController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
if(request()->ajax())
{
return datatables()->of(Restaurant::latest()->get())
->addColumn('action', function($data){
$button = '<button type="button" name="edit" id="'.$data->id.'" class="edit btn btn-primary btn-sm">Edit</button>';
$button .= ' ';
$button .= '<button type="button" name="delete" id="'.$data->id.'" class="delete btn btn-danger btn-sm">Delete</button>';
return $button;
})
->rawColumns(['action'])
->make(true);
}
return view('admin.restaurants.index');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$rules = array(
'naziv' => 'required|unique:restaurants|max:90',
'adresa' => 'required|max:150',
/*
'pon_pet' => 'required',
'min_dostava' => 'required|numeric|max:5',
'vrijeme_dostave' => 'required|max:10|numeric',
'cijena_dostave' => 'required|numeric|max:5',
'podrucije_grada' => 'required',
'br_telefona' => 'required|numeric|unique:restaurants',
'lokacija' => 'max:999',
'kuhinja_id' => 'required',
'user_id' => 'required'
*/
);
$error = Validator::make($request->all(), $rules);
if($error->fails())
{
return response()->json(['errors' => $error->errors()->all()]);
}
$form_data = array(
'naziv' => $request->naziv,
'adresa' => $request->adresa,
/*
'pon_pet' => $request->pon_pet,
'min_dostava' => $request->min_dostava,
'vrijeme_dostave' => $request-> vrijeme_dostave,
'cijena_dostave' => $request->cijena_dostave,
'podrucije_grada' => $request->podrucije_grada,
'br_telefona' => $request->br_telefona,
'lokacija' => $request->lokacija,
'kuhinja_id' => $request->kuhinja_id,
'user_id' => $request->user_id
*/
);
Restaurant::create($form_data);
return response()->json(['success' => 'Data Added successfully.']);
}
}
在我的blade:
!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold">Baza restorana</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Naziv</th>
<th>Adresa</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<span id="form_result"></span>
<form method="post" id="sample_form" class="form-horizontal" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label class="control-label col-md-4">Naziv</label>
<div class="col-md-8">
<input type="text" name="naziv" id="naziv" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4">Adresa</label>
<div class="col-md-8">
<input type="text" name="adresa" id="adresa" class="form-control" />
</div>
</div>
<br />
<div class="form-group" align="center">
<input type="hidden" name="action" id="action" />
<input type="hidden" name="hidden_id" id="hidden_id" />
<input type="submit" name="action_button" id="action_button" class="btn btn-warning"
value="Add" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
@endsection
<script>
$(document).ready(function(){
$('#dataTable').DataTable({
processing: true,
serverSide: true,
ajax:{
url: "{{ route('admin.restaurants.index') }}",
},
columns:[
{
data: 'id',
name: 'id'
},
{
data: 'naziv',
name: 'naziv'
},
{
data: 'adresa',
name: 'adresa'
},
{
data: 'action',
name: 'action',
orderable: false
}
]
});
$('#create_record').click(function(){
$('.modal-title').text("Add New Record");
$('#action_button').val("Add");
$('#action').val("Add");
$('#formModal').modal('show');
});
$('#sample_form').on('submit', function(event){
event.preventDefault();
if($('#action').val() == 'Add')
{
$.ajax({
url:"{{ route('admin.restaurants.store') }}",
method:"POST",
data: new FormData(this),
contentType: false,
cache:false,
processData: false,
dataType:"json",
success:function(data)
{
var html = '';
if(data.errors)
{
html = '<div class="alert alert-danger">';
for(var count = 0; count < data.errors.length; count++)
{
html += '<p>' + data.errors[count] + '</p>';
}
html += '</div>';
}
if(data.success)
{
html = '<div class="alert alert-success">' + data.success + '</div>';
$('#sample_form')[0].reset();
$('#dataTable').DataTable().ajax.reload();
}
$('#form_result').html(html);
}
})
}
});
});
</script>
问题
第一个问题是,当我单击Add提交输入时,它会保存我的数据,但它仅在白页上显示响应,而不仅仅是将其添加到数据表中。
第二个问题是我的数据甚至没有显示在数据表中。它是空的,我不知道为什么。
请帮忙,我该怎么办?有什么建议么?