在Django项目里，传统的页面跳转会触发整页刷新，不仅加载速度慢，还会丢失用户当前的操作状态。通过AJAX技术实现点击链接动态加载内容，只更新页面指定区域，能大幅提升用户交互体验，下面介绍完整的实现方案。
前端基础页面搭建
首先创建基础模板，包含导航链接和用于展示动态内容的容器区域，这里使用jQuery简化AJAX操作，需要在页面中引入jQuery库。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态加载示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.nav-link { margin-right: 15px; cursor: pointer; color: blue; }
#content-area { margin-top: 20px; padding: 20px; border: 1px solid #ccc; }
</style>
</head>
<body>
<div>
<span class="nav-link" data-url="/page1/">页面1</span>
<span class="nav-link" data-url="/page2/">页面2</span>
<span class="nav-link" data-url="/page3/">页面3</span>
</div>
<div id="content-area">
初始内容区域
</div>
</body>
</html>
前端AJAX请求逻辑
给导航链接绑定点击事件，点击时获取对应的请求地址，通过AJAX向Django后端发送请求，拿到返回的内容后更新到内容容器中。需要注意处理CSRF令牌，避免请求被拦截。
// 获取CSRF令牌的函数
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
$(function() {
$('.nav-link').click(function() {
const url = $(this).data('url');
// 发送AJAX GET请求
$.ajax({
url: url,
type: 'GET',
headers: { 'X-CSRFToken': getCookie('csrftoken') },
success: function(response) {
// 将返回的内容渲染到指定区域
$('#content-area').html(response);
},
error: function(xhr) {
$('#content-area').html('加载失败，请重试');
}
});
});
});
Django后端视图与路由配置
后端需要创建对应的视图函数，处理AJAX请求，返回需要动态加载的页面片段，而不是完整的HTML页面。同时配置路由让请求可以正确映射到视图。
视图函数实现
# views.py
from django.shortcuts import render
def page1_view(request):
# 返回页面1的片段内容
return render(request, 'page1_content.html')
def page2_view(request):
# 返回页面2的片段内容
return render(request, 'page2_content.html')
def page3_view(request):
# 返回页面3的片段内容
return render(request, 'page3_content.html')
路由配置
# urls.py
from django.urls import path
from . import views
urlpatterns = [
path('page1/', views.page1_view, name='page1'),
path('page2/', views.page2_view, name='page2'),
path('page3/', views.page3_view, name='page3'),
]
片段模板示例
创建page1_content.html等片段模板，只包含需要动态加载的内容，不需要完整的HTML结构。
<h3>页面1内容</h3>
<p>这是通过AJAX动态加载的页面1专属内容，不需要刷新整个页面。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
常见问题处理
- CSRF验证失败：确保AJAX请求头中携带了正确的CSRF令牌，或者使用
@csrf_exempt装饰器（仅测试环境使用，生产环境不建议）。 - 返回内容包含完整HTML：动态加载的模板只需要片段内容，不要包含<html>、<head>、<body>等根标签。
- 链接点击无反应：检查data-url属性的值是否与后端路由匹配，同时查看浏览器控制台是否有JS报错。
扩展优化
如果需要支持浏览器前进后退功能，可以结合HTML5的History API，在AJAX请求成功后修改浏览器的URL，避免用户刷新页面后回到初始状态。另外可以对频繁请求的内容添加缓存逻辑，减少后端请求压力。
DjangoAJAX动态加载JavaScriptjQuery修改时间：2026-07-09 01:48:25