jQueryを使わずにページをリロードせずにフォームを送信するには？

Question

私は以下のようなフォームを持っています。データベースへの更新を行うには、javaサーブレットにアクションを送信する必要があります。

ここにページを再ロードしないでフォームを送信するにはどうすればよいですか？ 現在、action="myServlet"と私は新しいページに直接私を保ちます。私がmyServletにアクションを削除した場合、入力は自分のデータベースに追加されません。私のJavaサーブレットのビューで

<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> 

、request.getParameterは名前を見て、私のデシベルにそれを追加して進みます。私のJavaScriptの一部で

@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(); 
     } 
    } 
} 

は、私が 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

変更フォーム

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 

Answer 2

同様の問題のコードを持っていますここで尋ねられた Submit form without reloading page

基本的には、関数を呼び出した後に "return false"を実行します。このようなものがうまくいくはずです：

Answer 3

これは私がJQueryを使わずにJSでAjaxを実装する方法です。私はおそらくJavaサーブレットの側であなたを助けることはできませんPHPとJSの男のようにはいはい、JS側から私の小さな助けをheres。この例は実際の例です。それがあなたに役立つかどうかを確認してください。あなたは、標準のフォームを停止するには、あなたの関数から `false`のを返す必要があるだろう

// 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); 
    } 
} 

おかげ