Ajax程式碼執行前應該先載入jQuery

海上华帆發表於2024-07-15
<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不起作用。

相關文章