Django项目中Ajax的应用，博客分类文章阅读，左右栏目自动更新

从数据库读取博客分类数据，放到左侧栏目，右侧栏目根据左侧点击的博客分类名进行自动更新对应的所有分类博客文章，在右侧显示出来.

models.py定义的博客数据库

from django.db import models
from django.contrib.auth.models import User


class Post(models.Model):
    title = models.CharField(max_length=255)
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    body = models.TextField()
    create_date = models.DateTimeField(auto_now_add=True)
    published_date = models.DateTimeField(null=True, blank=True)
    category = models.ForeignKey('Category', on_delete=models.CASCADE, null=True, blank=True)
    tags = models.ManyToManyField('Tag', blank=True)

    def __str__(self):
        return self.title


class Category(models.Model):
    name = models.CharField(max_length=255)


class Tag(models.Model):
    name = models.CharField(max_length=255)

浏览器入口代码

<li class="nav-item">
	<a class="nav-link" href="blog/blog_list/" target="_blank">test2</a>
</li>

路由文件路径blog\urls.py代码

   path('blog_list/', views.blog_list, name='blog_list'),

视图文件blog\views.py代码

def blog_list(request):
    categories = Category.objects.all()
    posts = Post.objects.all()  # 初始情况下获取所有文章

    # 检查请求中是否包含分类 ID
    category_id = request.GET.get('category_id')
    if category_id:
        # 根据选定的分类过滤文章
        posts = posts.filter(category_id=category_id)

    # 渲染模板，并传递过滤后的文章和分类数据
    return render(request, 'test2.html', {'posts': posts, 'categories': categories})


def get_posts(request):
    category_id = request.GET.get('category_id')
    posts = Post.objects.filter(category_id=category_id)

    # 构造返回的数据
    posts_data = [{'title': post.title, 'published_date': post.published_date} for post in posts]
    return JsonResponse(posts_data, safe=False)

html页面test2.html实现代码

{% extends 'header.html' %}
{% load static %}
{% block content %}
	<h1>文章列表</h1>
	<ul>
		{% for post in posts %}
			<li>{{ post.title }}</li>
		{% empty %}
			<p>没有找到文章</p>
		{% endfor %}
	</ul>
	<ul>
		{% for category in categories %}
			<li>{{ category.name }}</li>
		{% empty %}
			<p>没有找到文章分类</p>
		{% endfor %}
	</ul>
	<div>test2.html</div>
	<div class="container">
        <div class="row">
            <!-- 左边分类栏 -->
            <div class="col-md-4">
                <h2>文章分类</h2>
                <ul id="category-list">
                    {% for category in categories %}
						<li data-id="{{ category.id }}">{{ category.name }}</li>
					{% endfor %}
                </ul>
            </div>

            <!-- 右边文章栏 -->
            <div class="col-md-8">
                <h2>文章列表</h2>
                <div id="post-list">
					{% for post in posts %}
						<div>
							<h3>{{ post.title }}</h3>
							<p>{{ post.published_date }}</p>
						</div>
					{% empty %}
						<p>没有找到文章</p>
					{% endfor %}
                </div>
            </div>
        </div>
    </div>
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script>
// 使用jQuery获取分类列表并绑定点击事件
$(document).ready(function() {
    $('#category-list').on('click', 'li', function () {
        let categoryId = $(this).data('id');

        // 使用 AJAX 获取过滤后的文章
        $.ajax({
            url: '/blog/get_posts/', // 替换为你的Django视图URL
            type: 'GET',
            data: {'category_id': categoryId},
            success: function (data) {
                let html = '';
                data.forEach(function (post){
                    html += '<div><h3>' + post.title + '</h3><p>' + post.published_date + '</p></div>'
				});
                if (!data.length) {
                    html = '<p>没有找到文章</p>';
				}
                $('#post-list').html(html); // 更新文章列表// 假设 'data' 包含模板渲染后的 HTML 内容
            },
            error: function (xhr, status, error) {
                console.error('AJAX请求失败：', error);
            }
        });
    });
});
</script>

{% endblock %}

Ajax实现更新的html页面文件get_posts.html代码

之前错误找了很久的错误，原来是get_post写成了get-post,一个符号的错误导致整个页面不能运行

<!-- get_posts.html -->
{% for post in posts %}
    <div>
        <h3>{{ post.title }}</h3>
        <p>{{ post.published_date }}</p>
    </div>
{% empty %}
    <p>没有找到文章</p>
{% endfor %}