Question

我必须在表上实现Ajax，以便每次都可以部分更新表！小时。我的JSP代码是

< head >
  < meta http - equiv = "Content-Type"
content = "text/html; charset=ISO-8859-1" >
  < title > Insert title here < /title>
 
     </head >

  < body >
 
< jsp: useBean id = "bs" class = "beam_Status.BeamStatus_Bean" > < /jsp:useBean>
 
 < br >
  < h1 > Total Beamlines open are $ { bs.total_Beamopen()} < /h1>
 
<CENTER><H1>BEAMLINE STATUS</H1 > < /CENTER>
   <center>
<table  border = "1" cellpadding="1" width="750px" id="ajax"> 
 
     <tr> 
      <th><h1><b>BEAMLINES</b > < /h1></th >
  < th > < h1 > < b > STATUS < /b></h1 > < /th> 
        <th><h1>SYMBOLIC REPRESENTATION</h1 > < /th>
    </tr >

  < c: forEach
var = "country"
items = "${bs.beam_CurrentStatus()}" >
  < h3 > < b >
  < c: choose >
  < c: when test = "${country.value == 'IN OPERATION'}" >
  < tr >
  < td class = "green"
style = "text-transform: uppercase; "
width = "400px" > < center > < h1 > $ {
    country.key
  } < /h1></center > < /td> 
                <td class="green" style="text-transform: uppercase; "width="300px"><center><h1> ${country.value}</h1 > < /center> </td >
  < td width = "200px" > < center > < img src = "red.png"
align = "middle"
width = "100"
height = "110" / > < /center></td >
  < /tr> 
   </c: when >
  < c: otherwise >
  < tr >
  < td class = "red"
style = "text-transform: uppercase; "
width = "400px" > < center > < h1 > $ {
    country.key
  } < /h1></center > < /td> 
               <td class="red" style="text-transform: uppercase; "width="300px"><center> <h1>${country.value}</h1 > < /center> </td >
  < td width = "200px" > < center > < img src = "green.png"
align = "middle"
width = "100"
height = "110" / > < /center></td >
  < /tr> 
  </c: otherwise >
  < /c:choose>
</b > < /h3>
    </c: forEach >

  < /table>
 
</center >

现在，正如我所使用的那样，整个页面正在被刷新。

＆LT;％ response.setIntHeader（“Refresh”，5）; ％GT;

我对Ajax很新。请帮我实现Ajax。

Answer 1

基本理念：

function reqListener () {
  var html = this.responseText;  //Server will return just the new html for the table
  document.getElementById("myTableWrapper").innerHTML = html;  //element around table you want to replace
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = function(){alert("error");};
oReq.open("get", "yourFileThatReturnsTheTable.php", true);
oReq.send();

了解您使用的技术。

jsp页面表部分的Ajax实现

1 个答案: