为什么这使用按钮起作用，而使用 onkeypress 事件不起作用

Question

当我尝试使用带有按钮的 ajax 执行方法时，我在页面末尾的 div 中插入了一个文本，一切正常：

但是当我尝试使用带有 html 文本组件的 onkeypress 的 ajax 执行方法时，它只显示 ajax 响应文本而不是我在视图中拥有的其他组件：

我需要这个在 Internet Explorer 上工作

怎么了？

观点：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="${pageContext.request.contextPath}/views/test.js"
    type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
</head>
<body>
    <form action="test" method="post">
        <div id="div1">
            <table>
                <tr>
                    <td><span>Code: </span></td>
                    <td><input id="field1" name="field1" onkeypress="javascript:insertOnKeyPress()"
                        type="text" /></td>
                    <td><input id="method" name="method" type="hidden"
                        value="insert" /></td>
                    <td><input id="insert" name="insert" onclick="insertButton();"
                        type="button" value="Insert"></td>
                </tr>
            </table>
        </div>
        <div id="div2"></div>
    </form>
</body>
</html>

servlet：

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

@WebServlet("/sc/test")
public class TestServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    Logger logger = LoggerFactory.getLogger(TestServlet.class);

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) {
        String method = null;
        try {
            method = request.getParameter("method");
            System.out.println(method);
            if (method == null) {
                getServletConfig().getServletContext().getRequestDispatcher("/views/test.jsp").forward(request, response);
            } else if ("insert".equals(method)) {
                System.out.println(request.getParameter("param1"));
                response.setContentType("text/plain");
                response.setCharacterEncoding("UTF-8");
                response.getWriter().write("response text");
            }
        } catch (Exception exception) {
        }
    }
}

带有方法的 javascript 文件：

function insertOnKeyPress() {
    var tecla = window.event.keyCode;
    if (tecla == 13) {
        var xmlHttp = false;
        try {
            xmlHttp = new ActiveXObject("Msxml2.xmlHttp");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
            } catch (E) {
                xmlHttp = false;
            }
        }

        if (!xmlHttp) {
            xmlHttp = new XMLHttpRequest();
        }

        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState == 4) {
                document.getElementById("div2").innerHTML = xmlHttp.responseText;
            }
        };

        xmlHttp.open("POST", "test", true);
        xmlHttp.setRequestHeader("Content-type",
                "application/x-www-form-urlencoded");
        xmlHttp.send("method=insert&param1=param_test");
    }
}

function insertButton() {
    var xmlHttp = false;
    try {
        xmlHttp = new ActiveXObject("Msxml2.xmlHttp");
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
        } catch (E) {
            xmlHttp = false;
        }
    }

    if (!xmlHttp) {
        xmlHttp = new XMLHttpRequest();
    }

    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4) {
            document.getElementById("div2").innerHTML = xmlHttp.responseText;
        }
    };

    xmlHttp.open("POST", "test", true);
    xmlHttp.setRequestHeader("Content-type",
            "application/x-www-form-urlencoded");
    xmlHttp.send("method=insert&param1=param_test");
}

Answer 1

更改insertOnKeyPress以防止Return键的默认动作，即提交表单。

if (tecla == 13) {
    var xmlHttp = false;
    window.event.preventDefault();
    ...

顺便说一句，onkeypress 属性的开头不需要 javascript:。 onXXX 属性中从来不需要它，只有在将 Javascript 放入包含 URL 的属性中时才需要它（例如 href 或 src。