下面代码的意思就是通过ajax得到我们json数组data1和data2，因为他们两个是有联系的所以用到了for循环写在一起，然后在后面用到了setinterval函数来刷新，但是却不是局部的刷新我的活动列表框，而是刷新了整个页面。是为什么呀？是不是因为我的ajax属性都设置为同步了呢？还是因为数据量过大，希望可以得到解答，谢谢！
<!-- 活动列表框 -->
<div id="List">
<form action="http://localhost:8080/TheActivity/a3" method="post" id="Form2">
<ul id="list_ul">
<script>
function fun1(){
$.ajax({url:"http://localhost:8080/TheActivity/a2",
async:false,
success:function (data1) {
$("#list_ul").empty();
for (var j = 0; j < data1.length; j++) {
$.ajax(
{url: "http://localhost:8080/TheActivity/a1",
async: false,
success: function (data2) {
for (var i = 0; i < data2.length; i++) {
if (data1[j].id == data2[i].userid) {
console.log("true");
//判断活动类型去选择图片
var acimage = "u372.png";
switch (data2[i].type) {
case "sport":
acimage = "u367.svg";
break;
case "music":
acimage = "u368.png";
break;
case "game":
acimage = "u369.png";
break;
case "study":
acimage = "u370.png";
break;
case "party":
acimage = "u371.png";
break;
case "date":
acimage = "u372.png";
break;
}
//添加LI
$("#list_ul").append(" <li>\n" +
" <!--把开启模态框放到图片和内容里面-->\n" +
" <div class=\"rightsideimg\" data-toggle=\"modal\" data-target=\"#myModal" + i + "\"><img src=\"http://localhost:8080/static/image/images/activities/" + data2[i].image + "\" alt=\"\"></div>\n" +
" <div class=\"rightsidelistli\" data-toggle=\"modal\" data-target=\"#myModal" + i + "\">\n" +
" <span class=\"activitytitle\">" + data2[i].title + "</span>\n" +
" <br>\n" +
" <span class=\"activitytype\">" + data2[i].type + "</span>\n" +
" </div>\n" +
" <div class=\"rightsidedate\">\n" +
" <span class=\"activitytime\">" + data2[i].starttime + "</span>\n" +
" </div>\n" +
" <div class=\"checkboxgou\">\n" +
" <input class=\"inp-cbx\" id=\"dagou" + i + "\" type=\"checkbox\" style=\"display: none;\" name=\"activitychosen\" value=\"" + data2[i].id + "\">\n" +
" <label class=\"cbx\" for=\"dagou" + i + "\">\n" +
" <span>\n" +
" <svg width=\"12px\" height=\"10px\">\n" +
" <use xlink:href=\"#check\"></use>\n" +
" </svg>\n" +
" </span>\n" +
" </label>\n" +
" <svg class=\"inline-svg\">\n" +
" <symbol id=\"check\" viewBox=\"0 0 12 10\">\n" +
" <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n" +
" </symbol>\n" +
" </svg>\n" +
" </div>\n" +
" </li>");
//添加模态框
$("#list_ul").append(" <div class=\"modal fade\" id=\"myModal" + i + "\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\">\n" +
"\n" +
" <!-- 这是模态框的整体部分，在这里设置模态框的大小。宽高，位置，边距-->\n" +
"\n" +
" <div class=\"modal-dialog\" role=\"document\" style=\"width: 850px;height: 670px;margin-top: 100px\">\n" +
"\n" +
" <div style=\"width: 850px;height: 670px;border-radius: 10px\">\n" +
" <!--左边部分-->\n" +
" <div class=\"modalleft\">\n" +
" <div class=\"modalinfoimg\" >\n" +
" <img src=\"http://localhost:8080/static/image/images/activities/" + data2[i].image + "\" alt=\"\" >\n" +
"\n" +
" </div>\n" +
" <div class=\"moadlinfocontent\">\n" +
" <span style=\"font-size: 22px;font-weight: bolder;margin-left: 45px\">" + data1[j].username + "</span>\n" +
" <ul style=\"margin-top: 30px\">\n" +
" <li style=\"border: none;box-shadow: none;background-color: rgb(249,250,255)\">\n" +
" <span class=\"modalinfotitile\">Founder</span>\n" +
" <br>\n" +
" <span class=\"modalinfoticont\">" + data1[j].name + "</span>\n" +
" </li>\n" +
" <li style=\"border: none;box-shadow: none;background-color: rgb(249,250,255)\" >\n" +
" <span class=\"modalinfotitile\">Gender</span>\n" +
" <br>\n" +
" <span class=\"modalinfoticont\">" + data1[j].gender + "</span></li>\n" +
" <li style=\"border: none;box-shadow: none;background-color: rgb(249,250,255)\">\n" +
" <span class=\"modalinfotitile\">Age</span>\n" +
" <br>\n" +
" <span class=\"modalinfoticont\">" + data1[j].age + "</span>\n" +
" </li>\n" +
" <li style=\"border: none;box-shadow: none;background-color: rgb(249,250,255)\">\n" +
" <span class=\"modalinfotitile\">Hobby</span>\n" +
" <br>\n" +
" <span class=\"modalinfoticont\">" + data1[j].hobby + "</span>\n" +
" </li>\n" +
"\n" +
" <li style=\"border: none;box-shadow: none;background-color: rgb(249,250,255)\">\n" +
" <span class=\"modalinfotitile\">Email</span>\n" +
" <br>\n" +
" <span class=\"modalinfoticont\">" + data1[j].email + "</span>\n" +
" </li>\n" +
" </ul>\n" +
" </div>\n" +
" <div class=\"modalinfofooter\">\n" +
" <li style=\"border: none;box-shadow: none;background-color: rgb(249,250,255)\">\n" +
" <span class=\"modalinfotitile\">Brief</span>\n" +
" <br>\n" +
" <span style=\"display: block;\n" +
" color: black;\n" +
" font-size: 13px;\n" +
" font-weight: bolder;\n" +
" margin-top: 10px;\n" +
" margin-left: 35px;\">" + data1[j].brief + "</span>\n" +
" </li>\n" +
" </div>\n" +
" </div>\n" +
" <!--右边部分-->\n" +
" <div class=\"modalright\">\n" +
" <div class=\"modalrighttitle\"><p class=\"h4\" style=\"font-weight: bolder\">" + data2[i].title + "</p></div>\n" +
" <div class=\"modalrightmap\" id=\"modalrightmap" + i + "\"></div>\n" +
" <div class=\"modalrightcontent\">\n" +
" <li style=\"border: none;box-shadow: none;background-color: white;\">\n" +
" <span style=\"color: #C9CCD7;font-size: 16px;margin-top: 10px;\">Location</span>\n" +
" <br>\n" +
" <span style=\"display: block; color: black;font-size: 13px;font-weight: bolder;margin-top: 10px;\">\n" +
" " + data2[i].location + "\n" +
" </span>\n" +
" </li>\n" +
"\n" +
" <li style=\"border: none;box-shadow: none;background-color: white;\">\n" +
" <span style=\"color: #C9CCD7;font-size: 16px;margin-top: 10px;\">Type</span>\n" +
" <br>\n" +
" <span style=\"display: block;margin-top: 5px\" ><img src=\"http://localhost:8080/static/image/images/activities/" + acimage + "\" alt=\"\" style=\"width: 30px;height: 30px\"></span>\n" +
" </li>\n" +
"\n" +
" <li style=\"border: none;box-shadow: none;background-color: white;\">\n" +
" <span style=\"color: #C9CCD7;font-size: 16px;margin-top: 10px;\">Info</span>\n" +
" <br>\n" +
" <span style=\"display: block; color: black;font-size: 13px;font-weight: bolder;margin-top: 10px;\">\n" +
" " + data2[i].introduction + "\n" +
" </span>\n" +
" </li>\n" +
" <li style=\"border: none;box-shadow: none;background-color: white;height: 26px\">\n" +
" <span style=\"color: #C9CCD7;font-size: 16px;margin-top: 10px;\">Message</span>\n" +
" </li>\n" +
"\n" +
" <!-- 留言用的li-->\n" +
" <li></li>\n" +
" <li></li>\n" +
" <li></li>\n" +
" <li></li>\n" +
" <li></li>\n" +
" <li></li>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n");
//创建地图对象
var map = new BMapGL.Map('modalrightmap' + i + '');
//创建活动点
var myownPointer = new BMapGL.Point(114.403202, 30.495406);
map.centerAndZoom(myownPointer, 15);
map.enableScrollWheelZoom(true);
var myIcon = new BMapGL.Icon("http://localhost:8080/static/image/images/activities/u297.svg", new BMapGL.Size(49, 49));
// 创建点标记
var marker2 = new BMapGL.Marker(new BMapGL.Point(114.403202, 30.495406), {icon: myIcon});
// 在地图上添加点标记
map.addOverlay(marker2);
}
}
},
})
}
}
})
}
window.setTimeout(fun1,1000);
window.setInterval(fun1,5*60*1000);
</script>
