最近我发现自己必须创建一个用户可以自由填写的页面，但我很难理解如何使页面能够实时保存更改。
这个想法是，每次用户从下拉列表中选择一个选项或在文本区域中键入字符时，都应该保存状态（更改），而无需单击按钮或其他任何内容。
我已经尝试过以下代码，但我从控制台收到 419 错误，并且数据没有保存到数据库中。
HTML：
<table class="table-bordered table-striped table">
<tr>
<th>@lang('quickadmin.inspections.fields.inspection-date')</th>
<td field-key='inspection_date'>
{!! Form::text('inspection_date', old('inspection_date'), [
'class' => 'form-control date',
'placeholder' => '',
'id' => 'inspection_date',
]) !!}
</td>
<tr>
<th>@lang('quickadmin.inspections.fields.execution-date')</th>
<td field-key='execution_date'>
{!! Form::text('execution_date', old('execution_date'), [
'class' => 'form-control date',
'id' => 'execution_date',
'placeholder' => '',
]) !!}
</td>
<th>@lang('quickadmin.inspections.fields.execution-hour')</th>
<td field-key='execution_time'>
{!! Form::text('execution_time', old('execution_time'), [
'class' => 'form-control timepicker',
'id' => 'execution_time',
'placeholder' => '',
]) !!}
</td>
</tr>
<tr>
<th>Veicolo</th>
<td field-key='vehicles' colspan="3">
{!! Form::select('vehicles[]', $vehicles, old('vehicles'), ['class' => 'form-control select2', 'multiple' => 'multiple', 'id' => 'selectall-methods' ]) !!}
<p class="help-block"></p>
@if($errors->has('vehicles'))
<p class="help-block">
{{ $errors->first('vehicles') }}
</p>
@endif
</td>
</tr>
<tr>
<th>Trasferta [minuti]</th>
<td field-key='trip_time' colspan="3">
{!! Form::text('trip_time', old('trip_time'), [
'class' => 'form-control',
'id' => 'trip_time',
'placeholder' => 'Esempio: 28 [min]',
]) !!}
</td>
</tr>
<tr>
<th>Descrizione dell'intervento</th>
<td field-key='inspection_note' colspan="3">
@if ($inspection->inspection_note != null)
<textarea id="desc" class="form-control" style="width: 100%;resize: none;" rows="5" maxlength="80">{{ $inspection->inspection_note }}</textarea>
@else
<textarea id="desc" class="form-control" style="width: 100%;resize: none;" rows="5" placeholder="Descrizione intervento"
maxlength="80"></textarea>
@endif
</td>
</tr>
</table>
Javascript：
<script>
// This code will update the database when the user changes the value of a field
$(function() {
$('.form-control').on('change', function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': "{{ \Illuminate\Support\Facades\Session::token() }}"
}
});
$.ajax({
url: '/admin/new_inspections/update/' + {{ $inspection->id }},
type: 'post',
data: {
inspection_date: $('#inspection_date').val(),
inspection_time: $('#inspection_time').val(),
inspection_state: $('#inspection_state').find("option:selected").attr('value'),
user_code: $('#user_code').find("option:selected").attr('value'),
inspection_note: $('textarea#desc').val(),
trip_time: $('#trip_time').val(),
execution_date: $('#execution_date').val(),
execution_hour: $('#execution_time').val(),
},
success: function(response) {
if (response.success) {
console.log('Product updated successfully!');
} else {
console.log('Error updating product!');
}
}
});
});
});
</script>
控制器更新（代码根本进不去）：
public function update(UpdateNewInspectionRequest $request, $id)
{
$inspection = NewInspection::findOrFail($id);
$inspection->extra_vehicles()->sync(array_filter((array)$request->input('extra_vehicles')));
$inspection->update($request->all());
$inspection->save();
return back();
}
我不知道这是否重要，但我尝试实现的功能存在于不同主机上的旧版本网站中。大约 6 个月前，我们更换了主机并迁移了站点。有可能问题出在引用的改变上？
对于我缺席这个项目，我深表歉意，但我最近又回到了这个页面上工作，并且（也许感谢这段时间在另一个项目上的工作），我设法发现了问题并解决了它。
我更新这篇文章的目的是尽可能帮助那些可能遇到同样情况的人。
显然，由于网站的结构，我在 JavaScript 代码中分配的 URL 不正确。
下面，您可以看到正确的代码：
function updateData() {
trip_time = $('#trip_time').val();
id = {{ $inspection->id }};
state = $('#enum_inspection_state').find("option:selected").attr('value');
inspection_note = $('#desc').val();
user_code = $('#user_code').find("option:selected").attr('value');
datetime_inspection = $('#datetime_inspection').val();
datetime_execution = $('#datetime_execution').val();
vehicles = $('#vehicles').val();
recontact = $('#recontact').val();
offer_response = $('#offer_response').val();
offer_rejected_details = $('#offer_rejected_details').val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: '{{ url("admin/new_inspections/saveData") }}',
type: 'POST',
data: {
id: id,
state: state,
user_code: user_code,
datetime_inspection: datetime_inspection,
datetime_execution: datetime_execution,
trip_time: trip_time,
inspection_note: inspection_note,
vehicles: vehicles,
offer_response: offer_response,
offer_rejected_details: offer_rejected_details,
rejected_other: rejected_other,
rejected_cost: rejected_cost,
},
success: function(data) {
console.log('Saved successfully.');
if(!($('#enum_inspection_state').find("option:selected").attr('value') == 'Da fare')){
if(document.getElementById('enum_inspection_state').disabled == false){
location.reload();
}
document.getElementById('enum_inspection_state').disabled = true;
}
},
error: function(xhr, textStatus, errorThrown) {
console.error('Errore nella richiesta AJAX:', textStatus, errorThrown);
}
});
}
感谢大家的支持，如果错误如此微不足道，我深表歉意。