Ajax代码运行前应该先加载jQuery
例如,如果您有一个Ajax请求,它依赖于jQuery库,那么您应该先引入jQuery,然后再编写Ajax代码。如果Ajax代码在jQuery引入之前执行,那么它会因为找不到$或jQuery对象而失败。
<!-- 其他HTML内容 -->
<!-- 在</body>标签之前引入jQuery -->
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<!-- 紧接着引入您的Ajax代码 -->
<script>
// 这里是您的Ajax代码
</script>
</body>
</html>
具体实例如下:
<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不起作用。