对于为什么innerHTML不在IE中显示的Ajax调用？

我有一个非常简单的Ajax测试。在我的JSP上有2个下拉菜单：位置和部门。当用户更改位置我使用Ajax相应地过滤部门下拉菜单。对于为什么innerHTML不在IE中显示的Ajax调用？

该代码适用于Chrome。但与IE 部门下拉式不显示数据，而是其空白。很奇怪。

我检查了responseText属性，它在Chrome和IE中都返回了正确的数据。

当我在位置下拉列表中选择“总部”，从阿贾克斯responseText是

<option value=""></option><option value="1">Sales</option><option 
value="2">Support</option>

，当我在位置下拉列表中选择“区域办事处”，从阿贾克斯responseText是

<option value=""></option><option value="1">Sales</option>

但Chrome浏览器正常显示在部门下拉菜单和IE不显示在二。怎么来的？

这是我的代码：

我有2个班位置和部：

public class Location implements Serializable { 
    private int id; 
    private String description; 
    public int getId() { return id; } 
    public void setId(int id) { this.id = id; } 
    public String getDescription() { return description; } 
    public void setDescription(String description) { this.description = description; } 

    @Override 
    public String toString() { 
     return "Location [id=" + id + ", description=" + description + "]"; 
    } 
} 

public class Department implements Serializable { 
    private int id; 
    private String description; 
    public int getId() { return id; } 
    public void setId(int id) { this.id = id; } 
    public String getDescription() { return description; } 
    public void setDescription(String description) { this.description = description; } 

    @Override 
    public String toString() { 
     return "Department [id=" + id + ", description=" + description + "]"; 
    } 
}

这是我的JSP LocationDepartment.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript"> 
function locationChanged() { 
    var newLocation = document.getElementById("select_location").value; 
    var ajaxCallObject = getAjaxCallObject(); 
    ajaxCallObject.onreadystatechange=function() { 
     if (ajaxCallObject.readyState==4) { 
      if (ajaxCallObject.status==200) { 
       alert("success of ajaxCallObject"); 
       document.getElementById("select_department").innerHTML = ajaxCallObject.responseText; 
      } else { 
       alert("failure of ajaxCallObject"); 
       document.getElementById("select_department").innerHTML = ""; 
      } 
     } 
    } 

    ajaxCallObject.open("GET", "DepartmentServlet?location=" + newLocation, true); 
    ajaxCallObject.send(null); 
} 

function getAjaxCallObject() { 
    if (window.XMLHttpRequest) { 
     return new XMLHttpRequest(); 
    } else { 
     return new ActiveXObject('Microsoft.XMLHTTP'); 
    } 
} 
</script> 
</head> 
<body> 
<form action=""> 
<table> 
    <tr> 
     <td>Location</td> 
     <td> 
     <select id="select_location" onchange="locationChanged();"> 
      <option></option> 
      <option value="1">Head Office</option> 
      <option value="2">Regional Office</option> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td>Department</td> 
     <td> 
     <select id="select_department"> 
     </select> 
     </td> 
    </tr> 
</table> 
</form> 
</body> 
</html>

而且这是我的servlet DepartmentServlet：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    String parmLocation = null; 
    Integer locationCode = null; 
    List<Department> departmentList = null; 
    Department department = null; 
    StringBuffer sb = null; 


    parmLocation = request.getParameter("location"); 

    try { 
     locationCode = Integer.parseInt(parmLocation); 
    } catch (Exception e) { 
     locationCode = null; 
    } 

    // Head Office 
    if (locationCode != null && locationCode == 1) { 

     departmentList = new ArrayList<Department>(); 

     department = new Department(); 
     department.setId(1); 
     department.setDescription("Sales"); 
     departmentList.add(department); 

     department = new Department(); 
     department.setId(2); 
     department.setDescription("Support"); 
     departmentList.add(department); 

    // Regional Office 
    } else if (locationCode != null && locationCode == 2) { 

     departmentList = new ArrayList<Department>(); 

     department = new Department(); 
     department.setId(1); 
     department.setDescription("Sales"); 
     departmentList.add(department); 

    } 

    sb = new StringBuffer(); 
    sb.append("<option value=\"\"></option>");  
    if (departmentList != null) { 
     for (Department departmen : departmentList) { 
      sb.append("<option value=\"" + departmen.getId() + "\">"); 
      sb.append(departmen.getDescription()); 
      sb.append("</option>"); 
     } 
    }  

    response.setHeader("Cache-Control", "no-cache"); 
    response.setHeader("Pragma", "no-cache"); 

    PrintWriter out = response.getWriter(); 
    out.write(sb.toString()); 
}

请帮助。谢谢

来源

2015-04-01 ChumboChappati

看到这个问题。 [？JavaScript的innerHTML的工作不为IE] [1] 我建议你使用jquery [1]：http://stackoverflow.com/questions/8999998/javascript-innerhtml- is-not-working-for-ie – 2015-04-01 22:47:21

http://stackoverflow.com/questions/8557619/adding-option-elements-using-innerhtml-in-ie – epascarello 2015-04-01 23:02:34

@LeonardoNeninger您的链接中的答案不适合我。在alert（“ajaxCallObject”成功）后;'这是我尝试过的：'var newdiv = document.createElement（“div”）; newdiv.innerHTML = ajaxCallObject.responseText; var departmentElement =文档。的getElementById（ “select_department”）; departmentElement.appendChild（newdiv）;'现在IE和Chrome都无法运行。 – ChumboChappati 2015-04-02 14:18:43

对不起，我迟到了。测试此代码。让我知道如果为你工作。

setTimeout(function(){ 
 
alert($('select').html()); 
 
$('select').html('<option>Value</option>'); 
 
}, 1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select> 
 
    <option>Original</option> 
 
</select>

来源

2015-04-03 04:56:12

对于为什么innerHTML不在IE中显示的Ajax调用？

回答

相关问题