Django页面刷新问题：如何用Ajax实现无刷新页面切换？

我来帮你搞定这个无刷新页面切换的需求，只需要几个小改动就能实现，下面是具体步骤：

1. 调整视图函数（views.py） #

首先要确保name视图返回的是内容片段而非完整页面。如果你的name.html原本就是只包含核心内容的局部模板，这一步可以直接跳过；如果是带完整HTML结构的页面，建议改成仅保留需要替换的内容，视图代码无需额外修改：

def name(request):
    # 直接返回局部模板内容即可
    return render(request, 'site/name.html')

2. 修改前端页面（index.html） #

这里提供两种实现方式，选你顺手的来：

方式一：用jQuery简化操作 #

先引入jQuery，再绑定点击事件拦截跳转，发送Ajax请求替换内容：

<a href="/name" id="aj">page name</a>
<div id="content">
    {% block content %}
    首页默认内容
    {% endblock %}
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#aj').click(function(e) {
        // 阻止默认页面跳转行为
        e.preventDefault();
        const targetUrl = $(this).attr('href');
        
        // 发送Ajax请求并替换内容
        $.get(targetUrl, function(responseData) {
            $('#content').html(responseData);
        }).fail(function() {
            $('#content').html('页面加载失败，请稍后重试');
        });
    });
});
</script>

方式二：原生JavaScript实现（无需依赖库） #

如果不想引入jQuery，用原生JS也能轻松实现：

<a href="/name" id="aj">page name</a>
<div id="content">
    {% block content %}
    首页默认内容
    {% endblock %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const ajaxLink = document.getElementById('aj');
    const contentContainer = document.getElementById('content');

    ajaxLink.addEventListener('click', function(e) {
        e.preventDefault();
        const targetUrl = this.href;

        fetch(targetUrl)
            .then(response => response.text())
            .then(data => {
                contentContainer.innerHTML = data;
            })
            .catch(error => {
                console.error('加载出错:', error);
                contentContainer.innerHTML = '页面加载失败，请稍后重试';
            });
    });
});
</script>

3. 确保模板结构正确 #

你的name.html必须是无完整HTML结构的局部模板，比如：

<!-- site/name.html -->
<h1>这是Name页面的内容</h1>
<p>通过Ajax无刷新加载进来的内容哦！</p>

这样Ajax请求返回后，就能直接把这段内容替换到首页的content容器里，实现无刷新切换效果。

额外小提示 #

如果后续有多个链接需要实现无刷新切换，可以给这些链接统一加一个class（比如ajax-link），然后用类选择器绑定事件，不用每个链接都写重复代码；还可以在请求发送时添加"加载中..."的提示，提升用户体验。

内容的提问来源于stack exchange，提问作者Василий Потёмкин