zoukankan      html  css  js  c++  java
  • 每隔15s异步刷新手机页面

         前台异步js发请求代码:
      <script type="text/javascript"> var lightArr; var lightHistoryArr; /* 每隔15s刷单灯列表 */ $(document).ready(function() { setInterval(function() { $.ajax({ type: "post", url: "${ctx}/sys/light/refurbishLights", contentType : "application/x-www-form-urlencoded; charset=UTF-8", data: { books: "book", txtPass: "123"}, success: function (res) { lightHistoryArr=lightArr; lightArr=res; lightArr=eval("("+lightArr+")"); console.log(lightArr); var htmlDiv="<div class='indented' style='transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) translateZ(0px);'><div></div></div>"; for(var i=0;i<lightArr.length;i++){ for(key in lightArr[i]){ //加载变化的路灯 if(lightArr[i][key]!=lightHistoryArr[i][key]){ } } var inti=parseInt(i) + 1; if(inti%2==0){ htmlDiv+="<li data-icon='next' data-selected='selected' style='background-color:#eefaff;'>"; } if(inti%2!=0){ htmlDiv+="<li data-icon='next' data-selected='selected' style='background-color:#FFFFFF;'>"; } htmlDiv+="<i class='icon next'></i>"; htmlDiv+="<a href='#light_section?lightGuid="+lightArr[i].lightGuid+"' data-target='section'></a>"; htmlDiv+="<div class='grid'>"; htmlDiv+="<div class='col-1' >"; if(lightArr[i].icon==0){ htmlDiv+="<img alt='dad' src='${pageContext.request.contextPath}/static/images/-hong@2x.png' width='24px' height='24px'>"; } if(lightArr[i].icon==1){ htmlDiv+="<img alt='dad' src='${ctxStatic}/images/-lv@2x.png' width='24px' height='24px'>"; } htmlDiv+="<span style='font-family: PingFangSC-Regular;font-size: 16px;color: #333333;letter-spacing: 0;display: inline-block;vertical-align: middle;'>"+lightArr[i].title+"</span></div>"; if(inti%2!=0){ htmlDiv+="<div class='label' style='background-color:FFFFFF;'>"; } if(inti%2==0){ htmlDiv+="<div class='label' style='background-color:#eefaff;background:#eefaff;'>"; } if(lightArr[i].icon==0){ htmlDiv+="<span style='background: #FFFFFF;border: 1px solid #666666;border-radius: 4px;color: #666666;padding: 3px 8px;'>已关灯</span>"; } if(lightArr[i].icon==1){ htmlDiv+="<span style='background: #FFFFFF;border: 1px solid #16c4af;border-radius: 4px;color: #16c4af;padding: 3px 8px;'>已开灯</span>"; } htmlDiv+="</div></div></li>"; htmlDiv+=""; } $(".list").html(htmlDiv); } }) }, 15000);//15s刷新 }); </script>

    后台java代码:
        @ResponseBody
        @RequiresPermissions("sys:light:view")
        @RequestMapping(value = {"refurbishLights", "12"})
        public String refurbishLights(Light light, HttpServletRequest request, HttpServletResponse response, Model model) {
            
            try {
                org.tempuri.TLight[] lights = phlightSoapProxy.getLights();
                org.tempuri.TRoad[] tRoads = phlightSoapProxy.getRoads();
                org.tempuri.TAlarm[] tAlarms = phlightSoapProxy.getNewAlarms();
                String jsonStr = null;
                JSONArray array = new JSONArray();
                /* Json格式的数组形式 */
                JSONObject obj;
                /* json格式的单个对象形式 */
                for (int i = 0; i < lights.length; i++ )
                {
                    obj = new JSONObject();
                    obj.put( "lightGuid", lights[i].getLightGuid() );
                    obj.put( "title", lights[i].getLightName() );
                    /* json通过put方式以key-value形式填充 */
                    obj.put( "icon", lights[i].getYxValue() == 0 ? 0 : 1 );
                    String state = lights[i].getYxValue() == 0 ? "已关灯" : "已开灯";
                    obj.put("index","ddzt");
                    array.put(obj);
                    /* 将JSONObject添加入JSONArray */
                }
                model.addAttribute("index", "ddzt");
                model.addAttribute( "lights", lights );
                model.addAttribute( "lightsJSON", array.toString());
                System.out.println(array.toString());
                return array.toString();
            }catch (RemoteException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
               }
            return "success";
        }
    
    

    前台jsp代码:

            <article class="active" id="layout_book_article" style="top:81px;" data-scroll="true">
                
                <ul class="list" style="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, -38px) scale(1) translateZ(0px);">
                    <div class="indented"
                        style="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) translateZ(0px);">
                        <div></div>
                    </div>
                    <c:forEach items="${lights}" var="light" varStatus="index">
        
                        <li data-icon="next" data-selected="selected"  <c:if test="${(index.index+1)%2 == 0}">style="background-color:#eefaff;"</c:if><c:if test="${(index.index+1)%2 != 0}">style="background-color:#FFFFFF;"</c:if>>
                        <i class="icon next"></i>
                            <a href="#light_section?lightGuid=${light.lightGuid}" data-target="section"></a>
                            <div class="grid">
                                <div class="col-1" >
                                    <c:if test="${light.yxValue eq 0}"><img alt="dad" src="${pageContext.request.contextPath}/static/images/-hong@2x.png" width="24px" height="24px"></c:if>
                                    <c:if test="${light.yxValue eq 1}"><img alt="dad" src="${ctxStatic}/images/-lv@2x.png"  width="24px" height="24px"></c:if>
                                    <span style="font-family: PingFangSC-Regular;font-size: 16px;color: #333333;letter-spacing: 0;display: inline-block;vertical-align: middle;">${light.lightName}</span>
                                </div>
                                <div class="label"  <c:if test="${(index.index+1)%2 != 0}">style="background-color:FFFFFF;"</c:if><c:if test="${(index.index+1)%2 == 0}">style="background-color:#eefaff;background:#eefaff;"</c:if> >
                                    <c:if test="${light.yxValue eq 0}"><span style="background: #FFFFFF;border: 1px solid #666666;border-radius: 4px;color: #666666;padding: 3px 8px;">已关灯</span></c:if>
                                    <c:if test="${light.yxValue eq 1}"><span style="background: #FFFFFF;border: 1px solid #16c4af;border-radius: 4px;color: #16c4af;padding: 3px 8px;">已开灯</span></c:if>
                                </div>
                            </div>
                        </li>
                    </c:forEach>
                </ul>
            </article>
    手机自动刷起来:


  • 相关阅读:
    [CodeForces]Codeforces Round #429 (Div. 2) ABC(待补)
    About Me
    2018-06-14
    Codeforces Codeforces Round #484 (Div. 2) E. Billiard
    Codeforces Codeforces Round #484 (Div. 2) D. Shark
    Codeforces Educational Codeforces Round 44 (Rated for Div. 2) F. Isomorphic Strings
    Codeforces Educational Codeforces Round 44 (Rated for Div. 2) E. Pencils and Boxes
    Codeforces Avito Code Challenge 2018 D. Bookshelves
    Codeforces Round #485 (Div. 2) D. Fair
    Codeforces Round #485 (Div. 2) F. AND Graph
  • 原文地址:https://www.cnblogs.com/chenyangjava/p/9800046.html
Copyright © 2011-2022 走看看