如何提交沒有重載頁面的表單，沒有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？

回答

相關問題