Spring MVC如何返回HTML代码嵌入主页面以避免公共片段重复刷新

嘿，我来帮你搞定这个问题！你现在想实现的是页面跳转时只刷新主体内容，让顶部导航和侧边栏这些公共部分保持不动，对吧？结合你用的Spring MVC + AngularJS，这里有两个实用的方案可以参考：

这是最契合AngularJS生态的方式，把公共布局固定在主页面，通过路由动态加载不同的主体内容模板，完全避免页面重载。

步骤1：搭建主页面（比如index.html） #

把顶部导航、侧边栏这些公共部分写在主页面里，留一个专门的占位符用来加载主体内容：

<!DOCTYPE html>
<html ng-app="reservationApp">
<head>
    <!-- 引入依赖：AngularJS核心库 + 路由模块 -->
    <script src="angular.min.js"></script>
    <script src="angular-route.min.js"></script>
</head>
<body>
    <!-- 顶部导航栏（公共部分） -->
    <nav class="top-navbar">
        <!-- 导航链接用Angular路由跳转，比如 <a href="#!/reservations">我的预约</a> -->
    </nav>

    <!-- 侧边栏（公共部分） -->
    <aside class="sidebar-menu">...</aside>

    <!-- 主体内容占位符，路由会自动把模板渲染到这里 -->
    <div ng-view></div>

    <script>
        // 初始化Angular应用并注入路由模块
        var app = angular.module('reservationApp', ['ngRoute']);

        // 配置路由规则
        app.config(function($routeProvider) {
            $routeProvider
                // 匹配/reservations路由，加载对应的主体模板和控制器
                .when('/reservations', {
                    templateUrl: '/reservations/content', // 指向Spring MVC返回主体内容的接口
                    controller: 'ReservationController' // 可选，对应页面的业务逻辑控制器
                })
                // 其他页面的路由配置...
                .otherwise({redirectTo: '/'});
        });

        // 可选：定义预约页面的Angular控制器
        app.controller('ReservationController', function($scope) {
            // 页面相关的业务逻辑
        });
    </script>
</body>
</html>

步骤2：修改Spring MVC控制器，返回仅主体内容 #

原来的控制器返回完整页面，现在改成返回只包含主体内容的模板片段，比如reservation-content.html：

@Override
@PreAuthorize("hasAnyRole('ROLE_ADMIN','ROLE_USER','ROLE_FACILITY')")
@RequestMapping(value = {"/reservations/content"}, method = RequestMethod.GET)
public String reservationContent(){
    // 返回的模板仅包含主体内容，不要有<html>/<body>等根标签
    return "reservation-content";
}

另外，把原来的/reservations路由改成跳转到主页面：

@RequestMapping(value = {"/reservations"}, method = RequestMethod.GET)
public String reservationEntry(){
    return "index"; // 指向主页面
}

如果不想引入路由模块，也可以通过手动发起AJAX请求获取主体内容，然后替换页面中的主体区域。

步骤1：主页面结构 #

同样保留公共部分，给主体区域设置一个ID用于替换内容：

<!DOCTYPE html>
<html ng-app="reservationApp">
<head>
    <script src="angular.min.js"></script>
</head>
<body ng-controller="MainController">
    <nav class="top-navbar">
        <!-- 点击导航时触发加载方法，比如 <a ng-click="loadContent('/reservations/content')">我的预约</a> -->
    </nav>
    <aside class="sidebar-menu">...</aside>

    <!-- 主体内容容器 -->
    <div id="main-content"></div>

    <script>
        var app = angular.module('reservationApp', []);
        app.controller('MainController', function($scope, $http) {
            // 定义加载主体内容的方法
            $scope.loadContent = function(contentUrl) {
                $http.get(contentUrl)
                    .then(function(response) {
                        // 把返回的HTML插入到主体容器中
                        document.getElementById('main-content').innerHTML = response.data;
                        // 如果加载的内容包含Angular指令，需要手动触发编译
                        $scope.$apply();
                    });
            };
        });
    </script>
</body>
</html>

步骤2：Spring MVC控制器修改 #

和方案1一样，保留权限注解，返回仅主体内容的模板：

@Override
@PreAuthorize("hasAnyRole('ROLE_ADMIN','ROLE_USER','ROLE_FACILITY')")
@RequestMapping(value = {"/reservations/content"}, method = RequestMethod.GET)
public String reservationContent(){
    return "reservation-content";
}

• 主体内容模板（比如reservation-content.html）只能包含页面主体的HTML代码，不要有<html>、<head>、<body>这些根标签，否则嵌入后会破坏页面结构。
• 权限验证：不管用哪个方案，返回主体内容的接口都要保留@PreAuthorize注解，确保只有授权用户能访问。
• 如果用Angular路由，记得确保路由模块的依赖正确引入，并且链接用#!/开头的hash模式（或者配置HTML5模式）。

内容的提问来源于stack exchange，提问作者luca