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

【问题标题】：For an Ajax call why innerHTML is not displaying in IE?对于Ajax 调用，为什么innerHTML 不在IE 中显示？
【发布时间】：2015-04-01 22:22:31
【问题描述】：

我有一个非常简单的 Ajax 测试。在我的 JSP 上有 2 个下拉菜单：Location 和 Department。当用户更改 Location 时，我会使用 Ajax 相应地过滤 Department 下拉列表。

该代码在 Chrome 上运行正常。但是对于 IE，Department 下拉列表不显示数据，而是显示为空白。很奇怪。

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

当我在 Location 下拉列表中选择“总部”时，来自 Ajax 的 responseText 是

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

当我在 Location 下拉菜单中选择“区域办事处”时，来自 Ajax 的 responseText 是

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

然而 Chrome 在 Department 下拉列表中正确显示它，而 IE 根本不显示。怎么会？

这是我的代码：

我有 2 个班级 Location 和 Department：

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());
}

请帮忙。谢谢

【问题讨论】：

看到这个问题。 [JavaScript innerHTML 不适用于 IE？][1] 建议你使用 jquery [1]：stackoverflow.com/questions/8999998/…
stackoverflow.com/questions/8557619/…
@LeonardoNeninger 您链接中的答案对我不起作用。在alert("success of ajaxCallObject"); 之后，这是我尝试过的：var newdiv = document.createElement("div"); newdiv.innerHTML = ajaxCallObject.responseText; var departmentElement = document.getElementById("select_department"); departmentElement.appendChild(newdiv); 现在在 IE 和 Chrome 中都不起作用。

标签： javascript ajax jsp internet-explorer

【解决方案1】：

对不起，我迟到了。测试这段代码。让我知道是否适合你。

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>

【讨论】：