Django+JS开发SPA：点击按钮Ajax无法跳转注册页求助

你当前的问题在于Ajax请求本身不会自动触发页面跳转，它只是异步获取目标URL的内容（也就是你在console里看到的data），但不会自动替换当前页面内容或改变浏览器地址。下面给出两种针对性解决方案：

方案1：直接跳转（无需Ajax，适合普通页面跳转） #

如果你的SPA不需要局部刷新，只是单纯跳转到注册页面，完全没必要用Ajax，直接修改点击事件即可：

$('#id_register').click(function(){
    // 直接跳转到注册URL
    window.location.href = 'register';
})

或者更符合HTML语义的方式，把按钮换成<a>标签（可通过CSS保持按钮外观）：

<a href="register" id="id_register" class="button">Sign Up</a>

方案2：SPA局部刷新（保留Ajax，实现无跳转更新内容） #

如果要严格遵循SPA的局部刷新逻辑，需要在Ajax获取到注册页面的HTML后，替换当前页面的主内容区域，并同步更新浏览器地址栏：

1. 先给页面添加一个承载内容的主容器：

<div id="app">
    <!-- 首页原有内容放在这个容器内 -->
    <div class="banner">
        <div class="content">
            <h3 id="home">Feeling Hungry?</h3>
            <h4 id="home_para">Order right now!</h4>
            <div>
                <button id="id_sign" type="button">Sign In</button>
                <button id="id_register" type="button">Sign Up</button>
            </div>
        </div>
    </div>
</div>

2. 修改JavaScript代码，实现内容替换与路由同步：

$('#id_register').click(function(){
    $.ajax({
        url: 'register',
        method:"GET",
        success: function(data){
            // 用注册页面的HTML替换主容器内容
            $('#app').html(data);
            // 更新浏览器地址栏，保持路由一致性
            history.pushState({}, 'Register Page', '/register');
        },
        error: function(error){
            console.log(error)
        }
    })
})

3. 额外优化建议：
   • 确保Django的RegisterView返回的是注册页面的HTML片段（不要包含完整的<html>/<body>标签）
   • 建议在urls.py中给路由添加结尾斜杠，避免URL跳转异常：

     urlpatterns =[
         path('register/', RegisterView.as_view()),
         path('login/', LoginView.as_view(), name="login"),
         path('', HomeView.as_view(), name="home")
     ]
     

内容的提问来源于stack exchange，提问作者Noor ul ain Ibrahim