PLANET_08
PLANET_08
采纳率66.7%
2019-03-01 14:47 阅读 592
已采纳

Springboot 传值 只能在头部公共页面显示,不能在主页显示

20

图片说明图片说明

谁能告诉我这这是为什么,/head界面是公共头部界面,/index是主界面,我用ajax往/head界面传的数据,访问/index界面的时候没有显示!

下面为前端/head界面代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>head</title>
    <link th:href="@{/vendor/simple-line-icons/css/simple-line-icons.css}" rel="stylesheet"/>
    <link th:href="@{/vendor/font-awesome/css/fontawesome-all.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/styles.css}" rel="stylesheet"/>
</head>
<body>
<div th:fragment="header-body">
    <nav class="navbar page-header">
        <a href="#" class="btn btn-link sidebar-mobile-toggle d-md-none mr-auto">
            <i class="fa fa-bars"></i>
        </a>

        <a class="navbar-brand" href="/index">
            <img th:src="@{/img/logo.png}" alt="logo">
        </a>

        <a href="#" class="btn btn-link sidebar-toggle d-md-down-none">
            <i class="fa fa-bars"></i>
        </a>

        <ul class="navbar-nav ml-auto">
            <li class="nav-item d-md-down-none">
                <a>
                    <i class="fa fa-location-arrow"></i>
                    <span class="small ml-1 d-md-down-none">
                        <span style="padding-right:20px;" id="weatherParam"></span>
                    </span>
                </a>
            </li>

            <li class="nav-item d-md-down-none">
                <a href="#">
                    <i class="fa fa-bell"></i>
                    <span class="badge badge-pill badge-danger">5</span>
                </a>
            </li>

            <li class="nav-item d-md-down-none">
                <a href="#">
                    <i class="fa fa-envelope-open"></i>
                    <span class="badge badge-pill badge-danger">4</span>
                </a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
                   aria-haspopup="true"
                   aria-expanded="false">
                    <img th:src="@{/img/avatar-1.png}" class="avatar avatar-sm" alt="logo">
                    <span class="small ml-1 d-md-down-none">xx,欢迎登录</span>
                </a>

                <div class="dropdown-menu dropdown-menu-right">
                    <div class="dropdown-header">账户</div>

                    <a href="#" class="dropdown-item">
                        <i class="fa fa-bell"></i> 通知
                    </a>

                    <a href="#" class="dropdown-item">
                        <i class="fa fa-envelope"></i> 邮件
                    </a>

                    <a href="#" class="dropdown-item">
                        <i class="fa fa-bell"></i> 工资详情
                    </a>

                    <div class="dropdown-header">设置</div>

                    <a href="#" class="dropdown-item">
                        <i class="fa fa-user"></i> 个人资料
                    </a>

                    <a href="/settings" class="dropdown-item">
                        <i class="fa fa-wrench"></i> 设置
                    </a>

                    <a href="#" class="dropdown-item">
                        <i class="fa fa-lock"></i> 注销
                    </a>
                </div>
            </li>
        </ul>
    </nav>
</div>
<script th:src="@{/vendor/jquery/jquery.min.js}"></script>
<script th:src="@{/vendor/popper.js/popper.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/vendor/chart.js/chart.min.js}"></script>
<script th:src="@{/js/particles.min.js}"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url:"/common/json/weather",
            dataType:"json",
            type:"post",
            async:false,
            success:function (data) {
                $("#weatherParam").html(data.weather);
            }
        });
    })
</script>
</body>

</html>

下面为Index界面部分代码

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>OA-V1.0 主页</title>
    <link th:href="@{/vendor/simple-line-icons/css/simple-line-icons.css}" rel="stylesheet"/>
    <link th:href="@{/vendor/font-awesome/css/fontawesome-all.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/styles.css}" rel="stylesheet"/>
</head>
<body class="sidebar-fixed header-fixed">
<div th:replace="head::header-body"></div>
<div th:replace="left::left-body"></div>
<div class="page-wrapper">
    <div class="content">
        <div class="container-fluid">
            <div class="row">

利用了th:replace界面拼接

head头页面中返回的Json串为

{
    "weather": "北京 1.0℃~15.0℃"
}

求大佬看看怎么回事,是不是th:replace的问题

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    a804509721 无所谓你好你你好 2019-03-01 15:14

    太长了,,不过我给span块赋值都是这样$("#weatherParam").text(data.weather);

    点赞 评论 复制链接分享
  • baidu_33403616 再写三行 2019-03-01 18:11

    你看一下你的index界面

    div替换 可是js并没有执行 你把这个 $(document).ready(function(){ $.ajax({ url:"/common/json/weather", dataType:"json", type:"post", async:false, success:function (data) { $("#weatherParam").html(data.weather); } }); })

    放到index界面下试一下

    点赞 评论 复制链接分享

相关推荐