St0n233 2021-04-05 15:45 采纳率: 50%
浏览 738
已采纳

springboot 前端页面js怎么接收后端controller的model

想要实现一个网页弹窗功能,点击按钮后右下角会出现通知弹窗,可以查看通知。

前端页面代码

<!-- 通知 -->
<i class="fa fa-bell-o fa-1x" aria-hidden="true" style="color:white"></i>
    <div>
       <button id="show-notification-default-alert" class="btn btn-danger" th:if="true">新通知</button>
       <button class="btn btn-secondary" th:if="false">暂无通知</button>
    </div>
<!-- 通知 -->
<script type="text/javascript" th:src="@{/alert-resource/js/growl-notification.min.js}"></script>
<script>
    GrowlNotification.setGlobalOptions({
        buttons: {
            action: {
                text: 'Apply'
            },
            cancel: {
                text: 'Dismiss'
            }
        }
    });

    function getOptions() {
        var position = "bottom-right";
        var closeTimeout = 0;
        var animation = "slide";
        var showButtons = false;
        var showProgressBar = false;
        var animationOptions = {
            open: animation + '-in',
            close: animation + '-out'
        };

        if (animation === 'none') {
            animationOptions = {
                open: false,
                close: false
            };
        }

        return options = {
            description: 'I am a default notification',
            position: position,
            closeTimeout: closeTimeout,
            closeWith: ['click'],
            animation: animationOptions,
            showButtons: showButtons,
            buttons: {
                action: {
                    callback: function (notification) {
                        console.log('action button');
                    }
                }
            },
            showProgress: showProgressBar
        };
    }


    $('#show-notification-default-alert').on('click', function () {
        var options = getOptions();
        var noticeTitle = [[${notices.title}]];
        var noticeContent = [[${notices.content}]];
        options.title = noticeTitle;
        options.description = noticeContent;
        options.width = 500;
        GrowlNotification.notify(options);
    });


</script>

后端代码

	@RequestMapping(value = "get")
	public String getNotice(Notice notice,Model model){
		List<Notice> noticeList = noticeService.findList(new Notice());
		model.addAttribute("notices",noticeList);
		return "front/index";
	}

前端页面js想要实现foreach notices对象,把它分为一个个notice,再通过弹窗显示notice.title,notice.content。

  • 写回答

5条回答 默认 最新

  • 一剑荒芜 2021-04-06 09:03
    关注

    <script th:inline="javascript">
        var pages = [[${user}]];  // request(后台是user)
        var pages = [[${session.user}]];  // session(后台是user)
    </script>
    前端模板是thymeleaf

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 关注

    你要在后台发布接口呀,前台用ajax 方式通讯接收

    评论
  • 关注

    就是用@RestController

    评论
  • 关注

    不可以,必须是Map

    评论
  • 有问必答小助手 2021-04-06 10:09
    关注

    您好,我是有问必答小助手,你的问题已经有小伙伴为您解答了问题,您看下是否解决了您的问题,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    评论
查看更多回答(4条)

报告相同问题?

悬赏问题

  • ¥15 PCL注册的选点等函数如何取消注册
  • ¥15 问一下各位,为什么我用蓝牙直接发送模拟输入的数据,接收端显示乱码呢,米思齐软件上usb串口显示正常的字符串呢?
  • ¥15 Python爬虫程序
  • ¥15 crypto 这种的应该怎么找flag?
  • ¥15 设计一个时序电路,使其状态按2421(B)循环,并能自启动
  • ¥15 代码已写好,求帮我指出错误,有偿!
  • ¥15 matlab+波形匹配算法
  • ¥15 转录组分析做聚类树图时癌旁组被分到了癌组
  • ¥15 大一Python字典
  • ¥15 multisim电路设计(相关搜索:设计报告)