<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>
否則會出現無法生效的情況,就是Ajax不起作用。