Question

我有一个jsp页面，当我点击任何图像时，图像被更改为另一个。现在我想要的是一个用户的效果更改必须反映给所有用户同时访问此网站刷新整个页面这是我的代码...............

<html>
 <title>Java Web Starter Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" />

<head>
<title>Manage Objects</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
            $(document).ready(function() {
                loadbulbData();
        });
//bulbstatus
            function loadbulbData() {
                $('#main').load('index.jsp', function() 
            {
                //alert('inside refresh method');
                reloadData = window.setTimeout(loadbulbData, 20000)
            }); 
        }
</script>
</head>
<body>


<%! public static int bulbStatus = 0; 
public static int tubeStatus=0;
public static  int fanStatus=0;
public static  int acStatus=0; 

%>
  <%


%>

<%
if(request.getParameter("BULB.x")!=null)
{
   if(bulbStatus==0) 
       bulbStatus=1;
   else
       bulbStatus=0;
}

if(request.getParameter("BULBON.x")!=null)
{
   if(bulbStatus==1)
       bulbStatus=0;
   else
      bulbStatus=1;
}

if(request.getParameter("TUBEOFF.x")!=null)
{
   if(tubeStatus==0) 
       tubeStatus=1;
   else
       tubeStatus=0;
}  
if(request.getParameter("TUBEON.x")!=null)
{   
   if(tubeStatus==1) 
       tubeStatus=0;
     else
      tubeStatus=1;
}

if(request.getParameter("FanOff.x")!=null)
{
   if(fanStatus==0) 
       fanStatus=1;
  else
      fanStatus=0;
}
if(request.getParameter("FanOn.x")!=null)
{
   if(fanStatus==1) 
   fanStatus=0;
   else
       fanStatus=1;
}

if(request.getParameter("AcOff.x")!=null)
{
   if(acStatus==0) 
     acStatus=1;
   else
       acStatus=0;
}
if(request.getParameter("AcOn.x")!=null)
{
   if(acStatus==1) 
      acStatus=0;
     else
      acStatus=1;
}

%>
  <% 
     if(bulbStatus==0)
    {           
  %>
    <p><font color="white"><center><b>Manage Objects</center></b></p>
    <div id="main" name="alldivisions">
    <div id="NW" name="bulboffdiv">
    <form name="bulbForm" method="post" id="bulbonformid">  
        <input type="image" src="images/pic_bulboff.png"  align="center"    id="imagebulb" name="BULB" value="bulb"></input>
        <p><font color="RED"><b>  BULB OFF</b></p>

   </form>
    </div>  
<%
    } 
    else
    {

%> 
    <p><font color="white"><center><b>Manage Objects</center></b></p>
    <form name="bulbon" method="post">
    <div id="NW" name="bulbondiv"> 
        <input type="image" src="images/pic_bulbon.png"  align="center"     id="imagebulb" name="BULBON" value="bulb"></input>  
        <p><font color="Green"><b>  BULB ON</b></p>
    </div> 

</form>

<%
    }
    if(tubeStatus==0)
    {
   %> 
   <form  name="lampOffForm" method="post">
   <div id="NE" name="lampoffdiv">
        <input type="image" src= "images/lampoff.png" align="center"     name="TUBEOFF" value="tube" id="lampoff"></input>
        <p><font color="RED"><b>  LAMP OFF</b></p>
    </div>
    </form>
  <%  }
    else
    {
  %>
  <form name="lampOnForm" method="post">
        <div id="NE" name="lampondiv">
        <input type="image" src= "images/lampon.png" align="center" name="TUBEON" value="tube" id="lampon"></input>
        <p><font color="Green"><b>  LAMP ON</b></p>
    </div>
  </form>
  <%
    }
   if(fanStatus==0)
    {
   %>
   <form  name="fanOffForm" method="post">
        <div id="SW" name="fanoffdiv">
        <input type="image" src="images/Fanoff.png" align="center" id="image3" name="FanOff" value="ac"></input>
        <p><font color="RED"><b>  FAN OFF</b></p>
    </div> 
    </form>
   <%
    }
    else
     {
   %>
   <form name="FanOnForm" method="post">
   <div id="SW" name="fanondiv"> 
        <input type="image" src="images/Fanon.png" align="center"     id="image3" name="FanOn" value="ac"></input>
        <p><font color="Green"><b>  FAN ON</b></p>  
     </div>
</form>
 <%     
     }
     if(acStatus==0)
     {
   %>
   <form name="Acoffform" method="Post">
        <div id="SE" name="acoffdiv"> 
       <input type="image" src="images/ACoff.png" align="center"  id="image4" name="AcOff" value="fan"></input>
        <p><font color="RED"><b>  AC OFF</b></p>
     </div>
  </form>
    <%
    }
    else
    {
    %>
<form name="AcOnForm" method="Post">
    <div id="SE" name="acondiv"> 
        <input type="image" src="images/ACon.png" align="center"    id="image4" name="AcOn" value="fan"></input>
        <p><font color="Green"><b>  AC ON</b></p> 
    </div>
   </form>

<%
    }
%>
 </div>
</body>
</html>

提前致谢......

Answer 1

您需要实现某种服务器轮询 - 本文使用jquery提供了一个很好的示例http://techoctave.com/c7/posts/60-simple-long-polling-example-with-javascript-and-jquery/ - 它可能会指向正确的方向。（这主要是演示服务器推送方法）

Answer 2

我认为你只需要为刷新的数据调用一个函数而不需要刷新。如果那是真的。然后，您可以使用jquery ajax获取更新的数据并在一段时间后轮询它

例如：

setTimeout(function(){
     $.ajax({
             url: "demo_test.txt", //url for fetching refreshed data 
             success: function(result){
                  // write your refresh image code here
             }           
    });
}, 5000); //specify the time interval after which you need to refresh the data(this is 5 secs)

Answer 3

嘿，我只是在我的jquery代码中添加以下内容来解决问题

    $('#main').load('index.jsp', function() #main)

如何使用jquery刷新多个div

3 个答案: