使用两层ajax属性都设置为同步,在使用setinterval函数刷新的时候???

下面代码的意思就是通过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>

 

查看全部
qq_43919400
threecat.up
2021/01/13 23:44
  • json
  • ajax
  • jquery
  • 点赞
  • 收藏
  • 回答
    私信

3个回复