这里举得例子是: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) } //打开弹窗返回函数 }) })