提问人：Dung8466 提问时间：10/20/2023 更新时间：10/20/2023 访问量：20
Django Ajax toastr 成功时不显示
Django Ajax toastr not display when success
问：
我在使用 ajax toastr 时遇到了问题，我也在使用 bootstrap 5，因此可能会导致样式问题。
我的阿贾克斯：
{% load humanize %}
{% load static %}
<link rel="stylesheet" href="{% static 'style.css' %}">
<link href="toastr.css" rel="stylesheet"/>
{% block extra_js %}
<script src="toastr.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script type="text/javascript">
let csrftoken = '{{ csrf_token }}'
$(document).on('submit','#add-to-favourite',function(e){
e.preventDefault();
$.ajax({
type: $(this).attr('method'),
headers:{'X-CSRFToken':csrftoken},
url: $(this).attr('action'),
data: $(this).serialize(),
success: function (response) {
alert("Succes");
toastr.options.closeButton = true;
toastr.success('Added to Favourite');
}
})
});
</script>
{% endblock extra_js %}
警报消息显示 OK，因此 AJAX 函数返回成功。
答：
0赞
0urz4g
10/20/2023
#1
lib toastr 的导入必须在导入 Jquery 之后完成，因为 Jquery 是 toastr 的依赖项。
只需将
<script src="toastr.js"></script>
后
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
诸如此类：
{% load humanize %}
{% load static %}
<link rel="stylesheet" href="{% static 'style.css' %}">
<link href="toastr.css" rel="stylesheet"/>
{% block extra_js %}
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script src="toastr.js"></script>
<script type="text/javascript">
let csrftoken = '{{ csrf_token }}'
$(document).on('submit','#add-to-favourite',function(e){
e.preventDefault();
$.ajax({
type: $(this).attr('method'),
headers:{'X-CSRFToken':csrftoken},
url: $(this).attr('action'),
data: $(this).serialize(),
success: function (response) {
alert("Succes");
toastr.options.closeButton = true;
toastr.success('Added to Favourite');
}
})
});
</script>
{% endblock extra_js %}
评论
0赞
Dung8466
10/20/2023
我试过了，但仍然没有成功，我还尝试用<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
评论