.innerHTML不更新页面-AJAX
下面,我有一个名为stateChange的java脚本函数,它将更新HTML选择列表的内容。请参阅下面标记的代码部分。我已经通过编写一些警报语句,即xmlHttp.onreadystatechange=function{alertxmlHttp.responseText;},验证了服务器是否正确返回了新数据 根据函数中的这些警报语句,我注意到.innerHTML不更新页面-AJAX,ajax,html-select,Ajax,Html Select,下面,我有一个名为stateChange的java脚本函数,它将更新HTML选择列表的内容。请参阅下面标记的代码部分。我已经通过编写一些警报语句,即xmlHttp.onreadystatechange=function{alertxmlHttp.responseText;},验证了服务器是否正确返回了新数据 根据函数中的这些警报语句,我注意到 document.getElementById("dgpids").innerHTML=xmlHttp.responseText; 根本
document.getElementById("dgpids").innerHTML=xmlHttp.responseText;
根本不会执行,因此不会使用来自服务器的新数据更新页面
有人能告诉我下面的函数stateChange缺少什么吗?为什么您认为页面没有更新新数据?谢谢
<%@page import="java.util.List"%>
<%@page import="com.pm.dao.VirtualConfigTableDAO;" %>
<%@page import="com.pm.entity.VirtualConfigEntity;" %>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DAE PM Counters</title>
<script language="javascript" type="text/javascript">
var xmlHttp
function stateChange(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
**//!!!!!! HERE !!!!!**
//FOLLOWING LINE works
xmlHttp.onreadystatechange=function() { alert(xmlHttp.responseText); }
//I cannot update the list named dgpids below.
//The content of the response text coming from the server is correct.
//But the following line does not update the page. Do you know why???
document.getElementById("dgpids").innerHTML=xmlHttp.responseText;
xmlHttp.onreadystatechange=function() { alert('Got here2!'); }
}
}
function showState(str){
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request")
return;
}
var url="dgp.jsp";
url +="?id=" +str;
xmlHttp.onreadystatechange = stateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<form method="POST" name="me">
<select size="13" name="D1" multiple="no" onChange="checkData()">
<option value="1">CommonCounters(vDaeId)</option>
<option value="2">DgpCommonCounters(dgpId, vDaeId)</option>
<option value="3">SystemCommonCounters()</option>
</select>
<input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2"></p>
<br/>
<%
VirtualConfigTableDAO dao = new VirtualConfigTableDAO();
List<VirtualConfigEntity> vList = dao.getEntireVirtualConfigList();
%>
<select size="2" name="D2" multiple="no" onChange="if (this.selectedIndex != -1) showState(this.value);" onclick="showState(this.value);">
<%
for (VirtualConfigEntity entity : vList) {
%>
<option value="<%=String.valueOf(entity.getId())%>"> <%=String.valueOf(entity.getVirtualId())%></option>
<%}%>
</select>
<br/>
<br/>
<select name="dgpids" >
<option value='-1'></option>
</select>
</form>
</body>
您没有id为dgpids的元素 我想你是想给select一个id,但我不确定select是否允许innerHTML。您最好将select包装到div中,并更新服务器代码,以返回可以插入到div中的完整selecthtml 像这样的
希望这能有所帮助。Ya解决了这个问题。对不起,我应该更小心一点。谢谢。您可以看看这个,看看如何用javascript更新选择列表: