Toastr消息不显示在ajax crud中

Question

我尝试在ajax crud中显示toastr消息，但只有toastr模态弹出，模态中没有显示任何内容。我还在主布局和脚本标签中添加了所有必要的cdn。数据库中成功存储的数据和正常的成功消息显示，但我想显示toastr消息，我失败了。

我已经添加了CSS和JS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

我已经添加了主布局脚本代码:

<script>
@if (Session::has('success'))
toastr.options = {
"closeButton": true,
"progressBar": true
}
toastr.success("{{ session('success') }}");
@endif
@if (Session::has('error'))
toastr.options = {
"closeButton": true,
"progressBar": true
}
toastr.error("{{ session('error') }}");
@endif
@if (Session::has('info'))
toastr.options = {
"closeButton": true,
"progressBar": true
}
toastr.info("{{ session('info') }}");
@endif
@if (Session::has('warning'))
toastr.options = {
"closeButton": true,
"progressBar": true
}
toastr.warning("{{ session('warning') }}");
@endif
</script>

控制器代码

public function store(Request $request)
{
$validator = Validator::make($request->all(),[
'name' => 'required',
'email' => 'required|email',
'phone' => 'required',
'course' => 'required',
]);
if ($validator->fails()) {
return response()->json([
'status' => 404,
'errors' => $validator->messages(),
]);
}
else {
$student = new Student;
$student->name = $request->name;
$student->email = $request->email;
$student->phone = $request->phone;
$student->course = $request->course;
$student->save();
return response()->json([
'status' => 200,
// 'success' => true,
'message' => 'Successfully created',
]);
}
}

刀片脚本Ajax代码

$.ajax({
type: "POST",
url: "/students",
data: data,
dataType: "json",
success: function(response) {
// console.log(response);
if(response.status === 404) {
$('#saveform_errList').html("");
$('#saveform_errList').addClass('alert alert-danger');
$.each(response.errors, function (key, err_values) { 
$('#saveform_errList').append('<list>' + err_values + '</list>');
});
}
else{
Toastr.success(response.message);
// $('#saveform_errList').html("");
// $('#success_message').addClass('alert alert-success');
// $('#success_message').text(response.message);
$('#AddStudentModal').modal('hide');
$('#AddStudentModal').find('input').val("");
}
}
});

Answer 1

您可能有另一个样式链接打断它，可能是bootstrap，其中toastr样式可能与您自己的背景颜色相反。我经历过一次。