所以我有一个页面来显示学生注册的课程，并且该页面中有一个模态表单，所有内容都是作为 Laravel Web 项目构建的，该表单的目的是用户选择课程（所有数据）是从数据库中提取的），他们想要注册，然后单击“注册”将其添加到他们注册的课程中。因此，该表单是使用 jQuery ajax 的一些元素构建的，现在当注册成功时，它会运行并显示模式上的一条消息，现在的问题是成功注册后我仍然必须刷新页面才能看到列出的课程，我正在寻找一种方法来修复它，这样我就不必在之后刷新页面退出模式
这是我在 course.blade.php 中的表格
<div id="enroll-form">
<div class="modal-body">
<form method="post" action="{{ route('enroll') }}">
@csrf
<label for="courses">Select Courses:</label>
<select class="form-select"name="courses[]" id="courses" aria-label="Default select example">
<option selected>Select Course</option>
@foreach ($availableCourses as $course)
<option value="{{ $course->courseId }}">{{ $course->courseTitle }}</option>
@endforeach
</select>
</div>
<div class="modal-footer">
<button class="btn btn-secondary text-black" type="button" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary text-black" type="submit">Enroll</button>
</div>
</form>
<div class="card-footer">
<div id="enroll-messages"></div>
</div>
</div>
这是我的脚本代码
<script src="{{asset('vendor/jquery/jquery.min.js')}}"></script>
<script>
$(document).ready(function() {
$('#enroll-form form').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(response) {
$('#enroll-messages').html('<div class="alert alert-success">' + response.success + '</div>');
},
error: function(response) {
$('#enroll-messages').html('<div class="alert alert-danger">' + response.responseJSON.error + '</div>');
}
});
});
});
</script>
这是我的课程控制器
public function index()
{
$studentId = Auth::user()->studentId; //Retrieve the currently logged-in student's ID using the Auth facade.
$availableCourses = Course::all();
$user = User::with('courses')->find($studentId);
return view('course',
[
'user' => $user,
'availableCourses' => $availableCourses
]);
}
public function enroll(Request $request)
{
$studentId = Auth::user()->studentId;
$coursesToEnroll = $request->input('courses', []);
$user = User::with('courses')->find($studentId);
$alreadyEnrolled = $user->courses->pluck('courseId')->intersect($coursesToEnroll);
if ($alreadyEnrolled->count() > 0) {
$courseTitles = Course::whereIn('courseId', $alreadyEnrolled)->pluck('courseTitle')->implode(', ');
return response()->json(['error' => "You are already enrolled in the following course(s): $courseTitles."], 422);
}
$user->courses()->syncWithoutDetaching($coursesToEnroll);
return response()->json(['success' => 'Enrollment successful.']);
}
使用课程控制器，这就是我如何使用 couse.blade.php 中的此代码块循环访问数据库以显示课程（PS：它是一个 jquery 数据表）
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name <i> fa fa-angle-up</i></th>
<th>Course Code</th>
<th>Schedule</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
@foreach ($user->courses as $item)
<tr>
<td>{{$item->courseTitle}}</td>
<td>{{$item->courseCode}}</td>
<td>{{$item->courseSchedule}}</td>
<td>{{$item->courseProg}}%</td>
</tr>
@endforeach
</tbody>
</table>
最后是我的路线
Route::get('/course', [CourseController::class, 'index'])
->middleware(['auth', 'verified'])
->name('course');
Route::post('/enroll', [CourseController::class, 'enroll'])
->middleware(['auth', 'verified'])
->name('enroll');
使用当前代码，每当我尝试选择新课程时，它都会成功运行，成功消息会按预期显示，但我仍然需要重新加载页面才能看到它显示在为其分配的部分中。 （PS：此外，当用户注册已在错误消息中注册的课程时，错误消息也会运行，因为它应该说无法添加课程，原因已注册'
请在以下成功操作代码后重新加载当前页面。
<script src="{{asset('vendor/jquery/jquery.min.js')}}"></script>
<script>
$(document).ready(function() {
$('#enroll-form form').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(response) {
$('#enroll-messages').html('<div class="alert alert-success">' + response.success + '</div>');
//for refresh your page
location.reload();
},
error: function(response) {
$('#enroll-messages').html('<div class="alert alert-danger">' + response.responseJSON.error + '</div>');
}
});
});
});
</script>
你可以实现这一点，你可以在提交表单后添加加载新的课程内容到表格中，添加一个新的（路由，视图，控制器方法）：
添加动态加载课程的路径：
Route::get('/course-api', [CourseController::class, 'loadOnlyCourses'])
->middleware(['auth', 'verified'])
->name('course-api');
...
public function loadOnlyCourses()
{
//same code as index()
$studentId = Auth::user()->studentId;
$availableCourses = Course::all();
$user = User::with('courses')->find($studentId);
return view('course-only',
[
'availableCourses' => $availableCourses
]);
}
...
添加此视图以仅加载课程 html，无需完整页面:
@foreach ($user->courses as $item)
<tr>
<td>{{$item->courseTitle}}</td>
<td>{{$item->courseCode}}</td>
<td>{{$item->courseSchedule}}</td>
<td>{{$item->courseProg}}%</td>
</tr>
@endforeach
现在将获取代码添加到您的脚本中：
<script>
$(document).ready(function() {
$('#enroll-form form').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(response) {
$('#enroll-messages').html('<div class="alert alert-success">' + response.success + '</div>');
refreshTable();
},
error: function(response) {
$('#enroll-messages').html('<div class="alert alert-danger">' + response.responseJSON.error + '</div>');
}
});
});
});
function refreshTable() {
$("#dataTable tbody").load("{{route('course-api')}}");
}
</script>