javascript - JSP 无法使用 webservlet doGet 让 AJAX 工作

Question

我的问题是，我必须实现一个 AJAX 函数来显示所选商品是否缺货。然而，它没有显示我的错误消息，而是完全复制了该网站，而且我尝试过的任何方法似乎都不起作用。

我的代码背后的想法是，我有一个下拉表单，其中的操作设置为处理 doGet 和 doPost 的 Controller (Webservlet)，以及显示调用 AJAX 内容的 javascript 函数的 onchange 事件(您可以看到我对这些方面不是很有信心，我对此了解得还不够)。

相关的 JSP 部分如下:

<%@page contentType="text/html" pageEncoding="UTF-8" import="PCConfigurator.*"%>
<%
    session.setMaxInactiveInterval(0);
    ConfController ctrl = new ConfController();
%>
...
<script type="text/javascript">
    var xmlHttpObject = new XMLHttpRequest();

    function checkArticle(selectedArticleId) {
        var url = '?id=' + selectedArticleId.value;
        xmlHttpObject.open('GET', url);
        xmlHttpObject.onreadystatechange = handleStateChange;
        xmlHttpObject.send();
    }

    function handleStateChange() {
        if (this.readyState == 4 && this.status == 200) {
            var response = this.responseText;
            var result = document.getElementById("errorDiv");
            result.innerHTML = response;
        }
    }
</script>

<form method="POST" action="ConfController" >
    <table>
        <h1>PC Konfigurator GO Inc.</h1>
        <tr>
            <td><br><br></td>
        </tr>
        <tr>
            <td>Welchen Prozessor wollen Sie haben?:</td>
            <td><select name="cpuId" onchange="checkArticle(this)">
                    <%
                        for (Article article : ctrl.getCertainArticles("CPU")) {
                            out.print("<option value=\"" + article.getId() + "\">" + article.getName() + "</option>");
                        }
                    %>
                </select>
            </td>
        </tr>
        ...

Controller 看起来像这样:

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    try {
        int id = Integer.parseInt(req.getQueryString().split("=")[1]);
        if (findArticle(id).getCapacity() < 1) {
            resp.getWriter().write("<p><font color=\"red\">Leider ist dieser Prozessor nicht mehr verf&uuml;gbar.</font></p>");
        } else {
            resp.getWriter().write("");
        }
    } catch (Exception e) {
        System.err.println(e.getMessage());
    }
}

这是网站启动时的样子。到目前为止，一切都很好。

但是一旦我在下拉列表中选择另一个项目，就会发生这种情况......

我的意思是至少 ID 是正确的。只是愚蠢的 AJAX 我无法开始工作。

Answer 1

在您的代码中，您没有为 AJAX 请求指定 Controller 。这就是您得到与使用 AJAX 显示的响应相同的响应的原因。

在控制台中，您还可以通过将鼠标悬停在 ?id=2 上来查看正在调用 AJAX 请求的完整 URL。

 function checkArticle(selectedArticleId) {
    var url = 'myController?id=' + selectedArticleId.value;
    xmlHttpObject.open('GET', url);
    xmlHttpObject.onreadystatechange = handleStateChange;
    xmlHttpObject.send();
}

在上面的代码中，将 myController 替换为指向您的 servlet 的实际 Controller 名称。