zoukankan      html  css  js  c++  java
  • JS中直接从java后台获得对象的值(数组的值)

    这里举得例子是:JS直接从后台Contorller中(SpringMVC中的model中)获得数值的值

    Contorller 此处将 talentIntegralRecordsDay talentIntegralRecordsIntegral 两个数组用JSON.toJSONString()封装。

        @SuppressWarnings("deprecation")
        @RequestMapping("/integralParadise")
        public ModelAndView Welcome(HttpServletRequest request){
            
            Users user = userService.currentUser(request);    
            user.getTalentUser().getIntegral();
            System.out.println(user.getTime().getDate());
            
            TalentIntegralRecord[] signInTalentIntegralRecords= wechatIntegralService.getUserSignInTalentIntegralRecords(user.getId());
            int size = signInTalentIntegralRecords.length;
            int[] talentIntegralRecordsDay = new int[size];
            Long[] talentIntegralRecordsIntegral = new Long[size];
            for(int i=0;i<signInTalentIntegralRecords.length;i++){
                talentIntegralRecordsDay[i]=signInTalentIntegralRecords[i].getOperatorTime().getDate();
                talentIntegralRecordsIntegral[i]=signInTalentIntegralRecords[i].getIntegral();
            }
            Map<String,Object> map = new HashMap<String,Object>();
            map.put("talentIntegralRecordsDay", JSON.toJSONString(talentIntegralRecordsDay));
            map.put("talentIntegralRecordsIntegral", JSON.toJSONString(talentIntegralRecordsIntegral));
            return new ModelAndView("wechat/integralParadise/rili",map);
        }

    前台JSP 因为用到两个数组数据的JS代码为页面引用的JS代码所以要在页面中先声明获得后台两个数组(这段JS代码应在引用的JS文件前面)

    <script type="text/javascript"> 
        $(document).ready(function(){
            window.talentIntegralRecordsDay = ${talentIntegralRecordsDay};
            window.talentIntegralRecordsIntegral = ${talentIntegralRecordsIntegral};
        });
    </script>

    引用的JS文件 开始就获得了两个数组的值

    $(function() {
        var signFun = function() {
            
            var dateArray = window.talentIntegralRecordsDay;// 假设已经签到的
            var talentIntegralRecordsIntegral = window.talentIntegralRecordsIntegral;
            var $dateBox = $("#js-qiandao-list"),
                $currentDate = $(".current-date"),
                $qiandaoBnt = $("#js-just-qiandao"),
                _html = '',
                _handle = true,
                myDate = new Date();
            $currentDate.text(myDate.getFullYear() + '年' + parseInt(myDate.getMonth() + 1) + '月' + myDate.getDate() + '日');
    
            var monthFirst = new Date(myDate.getFullYear(), parseInt(myDate.getMonth()), 1).getDay();
    
            var d = new Date(myDate.getFullYear(), parseInt(myDate.getMonth() + 1), 0);
            var totalDay = d.getDate(); //获取当前月的天数
    
            for (var i = 0; i < 42; i++) {
                _html += ' <li><div class="qiandao-icon"></div></li>'
            }
            $dateBox.html(_html) //生成日历网格
    
            var $dateLi = $dateBox.find("li");
            for (var i = 0; i < totalDay; i++) {
                $dateLi.eq(i + monthFirst).addClass("date" + parseInt(i + 1));
                for (var j = 0; j < dateArray.length; j++) {
                    if (i == dateArray[j]) {
                        $dateLi.eq(i).addClass("qiandao");
                        var integral;
                        if(talentIntegralRecordsIntegral[j]==0){
                            integral="大转盘";
                        }else{
                            integral="+"+talentIntegralRecordsIntegral[j];
                        }
                        $dateLi.eq(i).find("div").text(integral);
                    }
                }
            } //生成当月的日历且含已签到
    
            $(".date" + myDate.getDate()).addClass('able-qiandao');
    
            $dateBox.on("click", "li", function() {
                    if ($(this).hasClass('able-qiandao') && _handle) {
                        $(this).addClass('qiandao');
                        qiandaoFun();
                    }
                }) //签到
    
            $qiandaoBnt.on("click", function() {
                if (_handle) {
                    qiandaoFun();
                }
            }); //签到
    
            function qiandaoFun() {
                $qiandaoBnt.addClass('actived');
                openLayer("qiandao-active", qianDao);
                _handle = false;
            }
    
            function qianDao() {
                $(".date" + myDate.getDate()).addClass('qiandao');
            }
        }();
    
        function openLayer(a, Fun) {
            $('.' + a).fadeIn(Fun)
        } //打开弹窗
    
        var closeLayer = function() {
                $("body").on("click", ".close-qiandao-layer", function() {
                    $(this).parents(".qiandao-layer").fadeOut()
                })
            }() //关闭弹窗
    
        $("#js-qiandao-history").on("click", function() {
            openLayer("qiandao-history-layer", myFun);
    
            function myFun() {
                console.log(1)
            } //打开弹窗返回函数
        })
    
    })
  • 相关阅读:
    SICP 习题1.16-1.19体会
    设计模式C++实现——组合模式
    QT官方下载地址
    浅析三角形測试程序
    操作系统开发之——进入保护模式
    PowerDesigner 打印错误
    @RequestParam注解一般用法
    Eclipse配置Maven的一些问题
    在windows上部署使用redis出现的问题及解决方法
    Eclipse导入模板格式Xml配置文件
  • 原文地址:https://www.cnblogs.com/weixiaole/p/5774001.html
Copyright © 2011-2022 走看看