如何提交没有重载页面的表单，没有jQuery？

我的表格如下，它需要发送一个动作给我的Java Servlet来更新数据库。如何提交没有重载页面的表单，没有jQuery？

如何在没有页面重新加载的情况下提交表单？目前与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); 
}

来源

2016-06-28 newbieprogrammer

您将需要从你的函数返回'FALSE'停止标准形式的发生也提交。（您需要修正函数中的语法错误：'.getElementById（“name）''中关闭''''前面缺少的'''。） – nnnnnn

[Submit form form without reloading page]（http： //www.stackoverflow.com/questions/18169933/submit-form-without-reloading-page） – abhishek

变化形式

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

来源

2016-06-28 05:41:13 intekhab

类似问题的代码在这里被问到 Submit form without reloading page

基本上，在调用函数后做“返回false”。像这样的东西应该可以工作：

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

来源

2016-06-28 05:45:22 Canu667

不适用于我，页面不断重新加载。 –

是的 - 它没有工作，因为在onsubmit处理程序中，我们'return submitFormAjax（）;返回false;'。它应该是'submitFormAjax（）; return false;'。我创建了一个小提琴 - > https://jsfiddle.net/yoL0f0mp/ - 并编辑并修复了答案。 – Canu667

这是我如何在没有JQuery的JS中实现Ajax。作为一个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); 
    } 
}

感谢

来源

2016-06-28 05:59:21

如何提交没有重载页面的表单，没有jQuery？

回答

相关问题