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)
        } //打開彈窗返回函數
    })

})