如何在不使用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中，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); 
}

- newbieprogrammer

---

你需要在函数中返回 false，以阻止标准表单提交的发生。 （并且你需要修复函数中的语法错误：在 .getElementById("name) 中缺少 "。） - nnnnnn

可能是在不重新加载页面的情况下提交表单的重复内容。 - Abhishek

这个回答解决了你的问题吗？[在不刷新页面的情况下提交表单] (https://dev59.com/knE85IYBdhLWcg3wQxLG) - SuperStormer

Answer 1

这里曾经有一个类似的问题（在不重新加载页面的情况下提交表单）

基本上，在调用函数后添加"return false"即可。像这样的代码应该可以工作：

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

- Canu667

---

是的 - 它没有起作用，因为在onsubmit处理程序中我们有'return submitFormAjax(); return false;'。它应该是'submitFormAjax(); return false;'。我创建了一个fiddle -> https://jsfiddle.net/yoL0f0mp/ - 并编辑和修复了答案。 - Canu667

Answer 2

这是我以前在JS中实现Ajax的方法，没有使用JQuery。由于我是PHP和JS方面的人，所以无法帮助您处理Java Servlet方面的问题，但是从JS方面提供一些小帮助。此示例是一个可工作的示例。看看它是否对您有帮助。

// HTML side
<form name="detailsForm" method="post" onsubmit="OnSubmit(e)">


// THE JS
function _(x){
    return document.getElementById(x);
}

function ajaxObj( meth, url ) 
{   
    var x = false;
    if(window.XMLHttpRequest)
        x = new XMLHttpRequest();
    else if (window.ActiveXObject) 
        x = new ActiveXObject("Microsoft.XMLHTTP");  
    x.open( meth, url, true );
    x.setRequestHeader("Content-type", "application/json");
    return x;
}
function ajaxReturn(x){
    if(x.readyState == 4 && x.status == 200){
        return true;    
    }
}

function OnSubmit(e) // call this function on submit
{
    e.preventDefault();
    var username = _("name").value;        
    if (username == "") 
    {
        alert("Fill out the form first");
    }
    else
    {
            var all = {"username":username};
            all = JSON.stringify(all);
            var url = "Myservlet";

            var ajax = ajaxObj("POST", url);
              ajax.onreadystatechange = function()
              {
                if(ajaxReturn(ajax) == true)
                {
                   // The output text sent from your Java side in response
                   alert( ajax.responseText );
                }
              }
            //ajax.send("user="+username+");
            ajax.send(all);
    }
}

谢谢

- Siddhartha Chowdhury

Answer 3

修改表单中的代码

onsubmit="submitFormAjax(event)"

修改你的JS代码

function submitFormAjax(e)
{
        e.preventDefault();
        var xmlhttp;
        if (window.XMLHttpRequest) {
        // code for modern browsers
        xmlhttp = new XMLHttpRequest();
        }
    ......
    ................
    ...............

return false;  //at last line 

- intekhab