JS中直接从java后台获得对象的值(数组的值)

时间:2023-03-08 16:54:55

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

相关文章