Django结合AJAX实现点击按钮展示通知 页面无渲染问题求助

你需要修改以下几处代码即可解决渲染异常问题：

• 1. 修正AJAX请求的参数配置错误
     jQuery的$.ajax中type参数是声明请求方法的字段，你误将返回数据类型写在了该位置，需新增dataType: 'json'声明返回数据格式，避免解析异常。
• 2. 修正序列化数据的取值逻辑
     Django内置serializers.serialize方法生成的JSON结构中，每个模型实例的自定义字段都存放在fields属性下，直接通过data[i]['title']无法取到对应值，需修改为data[i].fields.title。
• 3. 修正HTML拼接逻辑
     当前代码每次循环都会重新为变量k赋值，最终只会保留最后一条通知的HTML，需初始化k为空字符串，每次循环执行累加操作。
• 4. 避免覆盖通知区域原有元素
     直接修改#notification的innerHTML会把原有关闭按钮覆盖，需要在通知容器内新增一个专门存放通知列表的子容器。
• 5. 移除无效的点击事件绑定
     你给两个按钮都加了onclick="showNotifcation()"属性，但未定义对应的showNotifcation函数，会引发控制台报错，直接删掉该属性即可，因为你已经通过jQuery绑定了.myBtn的点击事件。

修正后的代码示例 #

前端HTML部分 #

<div class="fixed z-50 w-1/5 h-screen overflow-y-scroll shadow-xl header" id="notification">
    <button class="px-4 py-1 m-2 bg-opacity-75 rounded-lg bgorange focus:outline-none myBtn"><i class="bi bi-x"></i></button>
    <!-- 新增专门放通知内容的容器 -->
    <div id="notification-content"></div>
</div>

<button class="relative px-6 py-1 rounded-full focus:outline-none textpurple myBtn" style="background-color: #ed9720;">
    <span class="absolute top-0 w-4 h-4 text-xs rounded-full left-3 bgpurple" style="color: #ed9720;" id="notice-count">此处展示通知数量</span>
    <i class="fas fa-bell"></i>
</button>

前端AJAX部分 #

$(document).ready(function(){
    $('.myBtn').click(function(){
        $.ajax({
            url:'{% url 'posts:alerts' %}',
            method:'GET',
            dataType:'json', // 新增数据类型声明
            success:function(data){
                var k = ''; // 初始化为空字符串
                // 同步更新通知数量
                $('#notice-count').text(data.length);
                for(let i=0; i<data.length; i++){
                    // 累加HTML，从fields属性中取title
                    k += '<div class="p-2 mt-1 text-center bgpurple textpurple">'
                    k += '<p class="p-1 text-white border-2 bgpurple rounded-3xl">'+data[i].fields.title+'</p>'
                    k += '</div>';
                }
                // 把内容插入到专门的通知容器中
                document.getElementById('notification-content').innerHTML = k;
            }
        })
    })
})

可选优化（Django高版本兼容） #

Django 3.1+版本已经废弃了request.is_ajax()方法，你可以将views中的判断逻辑修改为如下代码，避免后续版本升级报错：

@login_required
def alerts(request):
    if request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest':
        lists = Post.objects.filter(boolean=False)
        list_serializer = serializers.serialize('json',lists)
        return JsonResponse(list_serializer,safe=False)
    return JsonResponse({'message':'bad request'})

内容的提问来源于stack exchange，提问作者artiest