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 %}