使用 Laravel 5.2 在数据表上出现 Ajax 错误
Posted
技术标签:
【中文标题】使用 Laravel 5.2 在数据表上出现 Ajax 错误【英文标题】：Ajax Error on Datatable using Laravel 5.2 【发布时间】：2020-04-21 18:38:01 【问题描述】：我有一个表格并显示数据并使用 Datatables Yajra。该数据表正在显示数据，并且所有功能都可以。但是，有时会出错。 我正在使用 Laravel 5.2.* 和 yajra 数据表 6.0.*。
这是错误通知。
这是我的js代码
<!-------------------------------------------->
<!-------------- SLAVE VARIABLE -------------->
<!-------------------------------------------->
<script>
$(document).ready(function()
$('#slave-variable-table').DataTable(
processing: true,
serverSide: true,
ajax:
url: ' url("/variable-list/slave-variable/data-slave-variable") '
,
columns: [
data: 'VARIABLE_NAME', name: 'VARIABLE_NAME' ,
data: 'TYPE', name: 'TYPE' ,
data: 'ADDRESS', name: 'ADDRESS' ,
data: 'ACCESS', name: 'ACCESS' ,
data: 'VALUE', name: 'VALUE' ,
data: 'action', name: 'action', orderable: false, searchable: false,
data: 'checkbox', name: 'checkbox', orderable: false, searchable: false,
]
);
);
</script>
<!-- DELETE DATA SLAVE_VARIABLE pada view variable-list/slave-variable -->
<script>
$(document).on('click', '.deleteSlaveVariable', function()
var id = $(this).data('id-variable');
Swal.fire(
title: 'Are you sure to delete this variable?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#0B5EA3',
cancelButtonColor: '#E6222C',
confirmButtonText: 'Delete'
).then((result) =>
if(result.value)
$.ajax(
url:"/variable-list/slave-variable/delete/" + id,
method:"GET",
data:id:id,
success:function(data)
alert(data);
$('#slave-variable-table').DataTable().ajax.reload();
);
)
);
<!-- AJAX CRUD operations -->
// Edit a slave_variable
$(document).on('click', '.modify-modal', function()
$('.modal-title').text('Modify Data');
$('#id_variable_edit').val($(this).data('id-variable'));
$('#id_slave_edit').val($(this).data('id-slave'));
$('#id_slot_edit').val($(this).data('id-slot'));
$('#variable_name_edit').val($(this).data('variable-name'));
$('#type_edit').val($(this).data('type'));
$('#access_edit').val($(this).data('access'));
$('#address_edit').val($(this).data('address'));
$('#ModifyModal').modal('show');
);
$(document).on('click', '#bulk_delete', function()
var id = [];
if(confirm("Are you sure you want to Delete this data?"))
$('.slave_checkbox:checked').each(function()
id.push($(this).val());
);
if(id.length > 0)
$.ajax(
url:' url("/variable-list/slave-variable/delete-all")',
method:"GET",
data:id:id,
success:function(data)
alert(data);
$('#slave-variable-table').DataTable().ajax.reload();
);
else
alert("Please select atleast one checkbox");
);
</script>
这是我的 slave-variable.blade.php
<div class="card-body border-top">
<h5>Slave's Variable Data</h5>
<div class="table-responsive">
<table class="table table-bordered table-hover" id="slave-variable-table" name="slave-variable-table">
<thead class="bg-light" align="center">
<tr class="border-1">
<th class="border-1">NAME</th>
<th class="border-1">TYPE</th>
<th class="border-1">ADDRESS</th>
<th class="border-1">ACCESS</th>
<th class="border-1">VALUE</th>
<th class="border-1">ACTION</th>
<th>
<button type="button" name="bulk_delete" id="bulk_delete" class="bulk_delete btn btn-danger btn-xs">X</button>
</th>
</tr>
</thead>
</table>
</div>
</div>
这是我的路线
//Read data from table SLAVE_VARIABLES to view /variable-list/slave-variable
Route::get('/variable-list/slave-variable', 'SlaveController@index');
Route::get('/variable-list/slave-variable/data-slave-variable', 'SlaveController@data');
//Update data dari table slave_variables
Route::post('/variable-list/slave-variable/update', 'SlaveController@update');
//Delete data dari table slave_variables
Route::get('/variable-list/slave-variable/delete/ID_VARIABLE', 'SlaveController@delete');
Route::get('/variable-list/slave-variable/delete-all', 'SlaveController@deleteAll');
las 是我的 SlaveController.php
public function data()
$SLAVE_VARIABLES = SlaveModel::select('*');
return Datatables::of($SLAVE_VARIABLES)
->addColumn('action', function($row)
$btn = '<a href="javascript:void(0)" data-toggle="tooltip"
data-id-variable="'.$row->ID_VARIABLE.'"
data-id-slave="'.$row->ID_SLAVE.'"
data-id-slot="'.$row->ID_SLOT.'"
data-variable-name="'.$row->VARIABLE_NAME.'"
data-type="'.$row->TYPE.'"
data-address="'.$row->ADDRESS.'"
data-access="'.$row->ACCESS.'"
data-original-title="Modify" class="edit btn btn-primary btn-sm modify-modal">Modify</a>';
$btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip" data-id-variable="'.$row->ID_VARIABLE.'" data-original-title="Delete" class="btn btn-danger btn-sm deleteSlaveVariable">Delete</a>';
return $btn;
)
->addColumn('checkbox', '<input type="checkbox" name="slave_checkbox[]" class="slave_checkbox" value="$ID_VARIABLE" />')
->make(true);
public function update(Request $request)
$ID_VARIABLE = $request->ID_VARIABLE;
$ID_SLAVE = $request->ID_SLAVE;
$ID_SLOT = $request->ID_SLOT;
$VARIABLE_NAME = $request->VARIABLE_NAME;
$TYPE = $request->TYPE;
$ACCESS = $request->ACCESS;
$ADDRESS = $request->ADDRESS;
$slave_variables=SlaveModel::where('ID_VARIABLE','=',$ID_VARIABLE)
->update([
'ID_SLAVE'=>$ID_SLAVE,
'ID_SLOT' => $ID_SLOT,
'VARIABLE_NAME' => $request->VARIABLE_NAME,
'TYPE' => $request->TYPE,
'ACCESS' => $request->ACCESS,
'ADDRESS' => $ADDRESS
]);
// alihkan halaman ke halaman /variable-list/slave-variable
return redirect('/variable-list/slave-variable')
->with('update-success', 'Data has ben updated!');
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return Response
*/
public function delete($ID_VARIABLE)
//memilih id
$SLAVE_VARIABLE = SlaveModel::where('ID_VARIABLE',$ID_VARIABLE);
if($SLAVE_VARIABLE->delete())
echo 'Data Deleted';
function deleteAll(Request $request)
$ID_VARIABLES = $request->input('id');
$SLAVE_VARIABLE = SlaveModel::whereIn('ID_VARIABLE', $ID_VARIABLES);
if($SLAVE_VARIABLE->delete())
echo 'Data Deleted';
然后，这是代码正常运行时的显示
请大家帮帮我，谢谢。
【问题讨论】：
你在使用php artisan serve吗？
是的。我正在使用它
package page 表示它无法使用。
@apokryfos 我可以用什么来构建它？
尝试使用homestead
【参考方案1】：
此错误与 ajax 有关。这通常发生在未从服务器返回所需的响应时，即在这种情况下为JSON，而是返回了 html 页面。请参阅上面的屏幕截图，其中返回的响应页面未找到 httpnotfoundexception
所以首先检查这个路由/url是否真的有效，如果有效，那么它会将所需的响应JSON返回到数据表。
【讨论】：
【参考方案2】：添加 csrf 令牌并在您的 ajax 代码中输入 post
'type': 'POST',
'data': function ( d )
d._token = " csrf_token() ";
<script>
$(document).ready(function()
$('#slave-variable-table').DataTable(
processing: true,
serverSide: true,
ajax:
'url' : ' url("/variable-list/slave-variable/data-slave-variable") ',
'type': 'POST',
'data': function ( d )
d._token = " csrf_token() ";
,
columns: [
data: 'VARIABLE_NAME', name: 'VARIABLE_NAME' ,
data: 'TYPE', name: 'TYPE' ,
data: 'ADDRESS', name: 'ADDRESS' ,
data: 'ACCESS', name: 'ACCESS' ,
data: 'VALUE', name: 'VALUE' ,
data: 'action', name: 'action', orderable: false, searchable: false,
data: 'checkbox', name: 'checkbox', orderable: false, searchable: false,
]
);
);
</script>
【讨论】：
如果对您有用，请选择此答案，谢谢。\ 我已经包含了代码。但是，问题依然存在。有时数据表运行成功，有时会出错。【参考方案3】：修改你的控制器
public function data()
$SLAVE_VARIABLES = SlaveModel::select('*');
return Datatables::of($SLAVE_VARIABLES)
->addColumn('action', function($row)
$btn = '<a href="javascript:void(0)" data-toggle="tooltip"
data-id-variable="'.$row->ID_VARIABLE.'"
data-id-slave="'.$row->ID_SLAVE.'"
data-id-slot="'.$row->ID_SLOT.'"
data-variable-name="'.$row->VARIABLE_NAME.'"
data-type="'.$row->TYPE.'"
data-address="'.$row->ADDRESS.'"
data-access="'.$row->ACCESS.'"
data-original-title="Modify" class="edit btn btn-primary btn-sm modify-modal">Modify</a>';
$btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip" data-id-variable="'.$row->ID_VARIABLE.'" data-original-title="Delete" class="btn btn-danger btn-sm deleteSlaveVariable">Delete</a>';
return $btn;
)
->addColumn('checkbox', '<input type="checkbox" name="slave_checkbox[]" class="slave_checkbox" value="$ID_VARIABLE" />')
->rawColumns(['checkbox', 'action'])
->make(true);
我添加了->rawColumns(['checkbox', 'action']) 行
它不见了
【讨论】：
如果我添加该代码，我绝对无法加载数据 您能否显示您在哪个 url 中遇到了 ajax 错误。需要检查 500 或 400 错误以上是关于使用 Laravel 5.2 在数据表上出现 Ajax 错误的主要内容，如果未能解决你的问题，请参考以下文章
从 Laravel 5.2 更新到 5.3 后，调用数组上的成员函数 all()