javascript - 没有jQuery，如何在不重新加载页面的情况下提交表单？

Question

我有如下表单，它需要向我的 java Servlet 发送一个操作来更新数据库。

如何在页面不重新加载的情况下提交表单？目前使用 action="myServlet" 它会引导我到一个新页面。如果我删除对 myServlet 的操作，则输入不会添加到我的数据库中。

<form name="detailsForm" method="post" action="myServlet" 
      onsubmit="return submitFormAjax()">
    name: <input type="text" name="name" id="name"/> <br/>
    <input type="submit" name="add" value="Add" />
</form>

在我的 Java servlet View 中，request.getParameter 将查找名称并将其添加到我的数据库中。

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) 
  throws ServletException, IOException
{   
    if (request.getParameter("add") != null) {
        try {
            Table.insert(name);
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }
}

在我的 JavaScript 部分，我有一个 submitFormAjax 函数

function submitFormAjax()
{
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for modern browsers
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            alert(xmlhttp.responseText); // Here is the response
        }

    var id = document.getElementById("name").innerHTML;
    xmlhttp.open("POST","/myServlet",true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("name=" + name); 
}

Answer 1

这里有人问过类似的问题 Submit form without reloading page

基本上，调用函数后执行“return false”。这样的事情应该有效:

<form name="detailsForm" 
      method="post" 
      action="myServlet" 
      onsubmit="submitFormAjax(); 
      return false;"
>