Question

下面，我有一个java脚本函数（名为stateChange），它有望更新HTML选择列表的内容（请参阅下面标记为HERE的代码部分）。我已经验证了服务器通过编写一些警告语句来正确地返回新数据（即xmlHttp.onreadystatechange = function（）{alert（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>

Answer 1

您没有ID为dgpids的元素。

我认为您打算给select选择一个id，但我不确定select会允许innerHTML。您可以更好地将选择包装在div中并更新您的服务器代码以返回可以插入div的完整选择html。

像jsfiddle这样的东西。

希望这有帮助。

.innerHTML不会更新页面--AJAX

1 个答案: