Java 在使用Ajax的情况下，如何不在Servlet中编写HTML代码_Java_Ajax_Jsp_Servlets

Java 在使用Ajax的情况下，如何不在Servlet中编写HTML代码

java ajax jsp servlets

Java 在使用Ajax的情况下，如何不在Servlet中编写HTML代码,java,ajax,jsp,servlets,Java,Ajax,Jsp,Servlets,有人告诉我，在Servlet中向response.getWriter编写HTML不是一个好的实践，这就是JSP出现的原因但对于Ajax，我看到的是，我必须将HTML写入Servlet中的response.getWriter，以便JSP中XMLHttpRequest对象的responseText属性选择它 Ajax还有其他方法来完成同样的任务吗这是我的例子。我有两个下拉列表位置和部门。当用户选择一个特定的位置时，我使用Ajax在Department下拉列表中显示它的部门。出于测试目的，位置和部

有人告诉我，在Servlet中向response.getWriter编写HTML不是一个好的实践，这就是JSP出现的原因

但对于Ajax，我看到的是，我必须将HTML写入Servlet中的response.getWriter，以便JSP中XMLHttpRequest对象的responseText属性选择它

Ajax还有其他方法来完成同样的任务吗

这是我的例子。我有两个下拉列表位置和部门。当用户选择一个特定的位置时，我使用Ajax在Department下拉列表中显示它的部门。出于测试目的，位置和部门采用硬编码

我有两个课程地点和部门：

我有一个JSP LocationDepartment.JSP：

然后在JSP中，我可以在Ajax的回调函数中访问request的这个属性，并循环遍历它，构建select标记的新HTML，然后替换当前的HTML

谢谢

Ajax调用的全部思想是发送数据。不要发送html响应，而是从后端发送json/xml，让前端html/js使用jquery或任何其他js库提供的受支持的模板技术构建html。

下面是我在评论中提到的示例：

JSP:

Servlet：

Map<String, Object> data = new HashMap<String, Object>();
data.put( "name", "Mars" );
data.put( "age", 32 );
data.put( "city", "NY" );
JSONObject json = new JSONObject();
json.putAll( data );
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().println(json);

如果问题是知道select的id，为什么不发送选项并将它们放在select的.innerHTML中呢？我没有发送整个select并将其放入包含div的.innerHTMLHi中，而是更新问题。关于select的.innerHTML，您是对的。我真正的问题是在Ajax调用的情况下如何访问request属性设置request属性后，您可以转发到一个jsp，该jsp根据该列表构建HTML。Ajax回调中最终将接收到的是响应的输出，在这种情况下，是由转发到的JSP打印的内容。@ChumboChappati看看创建sub1和sub2的JQuery方法，然后对它们不做任何处理。您创建了JSONObject json，然后再也不要在其中放入任何内容—您是对的。更新了答案。

<%@ 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("locationChanged(): success of ajaxCallObject");
                document.getElementById("div_department").innerHTML = ajaxCallObject.responseText;
            } else {
                alert("locationChanged(): failure of ajaxCallObject");
            }
        }
    }

    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>
        <div id="div_location">
        <select id="select_location" onchange="locationChanged();">
            <option></option>
            <option id="1">Head Office</option>
            <option id="2">Regional Office</option>
        </select>
        </div>
        </td>
    </tr>
    <tr>
        <td>Department</td>
        <td>
        <div id="div_department">
        <select id="select_department">
        </select>
        </div>
        </td>
    </tr>   
</table>
</form>
</body>
</html>

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("DepartmentServlet: doGet(): START -----");
    String location = null;
    List<Department> departmentList = null;
    Department department = null;
    StringBuffer sb = null;


    location = request.getParameter("location");

    if (location != null && location.equalsIgnoreCase("Head Office")) {

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

    } else if (location != null && location.equalsIgnoreCase("Regional Office")) {

        departmentList = new ArrayList<Department>();

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

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

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

sb = new StringBuffer();        
sb.append("<select id=\"select_department\">");
if (departmentList != null) {
    for (Department d : departmentList) {
        sb.append("<option id=\"" + d.getId() + "\">");
        sb.append(d.getDescription());
        sb.append("</option>");
    }
}       
sb.append("</select>");
PrintWriter out = response.getWriter();
out.write(sb.toString());

request.setAttribute("DepartmentList", departmentList);

$(document).ready(function() {
      $.getJSON("http://localhost:8080/TestWeb/test", function(data) {
      $.each(data, function(key, val) {
        console.log(key+' '+ val);
    });
  });
});

Map<String, Object> data = new HashMap<String, Object>();
data.put( "name", "Mars" );
data.put( "age", 32 );
data.put( "city", "NY" );
JSONObject json = new JSONObject();
json.putAll( data );
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().println(json);