頁面在包裝表單並進行AJAX調用時重新加載頁面

如果我在我的文本元素周圍添加一個表單並進行AJAX調用，頁面將被重新加載。如果我從我的文本元素周圍移除表單並進行AJAX調用，則頁面不會重新加載。由於各種原因，我需要表單（至少包裝隱藏的元素）。頁面在包裝表單並進行AJAX調用時重新加載頁面

代碼

<div id="mainContent" style="width:500px;position:relative;display:block;margin:0 auto;"> 
    <p> 
    <form id="myForm" name="myForm"> 
     <input type="hidden" name="nonce" id="nonce"/> 
     <input type="hidden" name="title" id="title"/> 
     <input type="hidden" name="content" id="content"/> 
     <button onclick="getData('/blog/?json=info')">Get JSON API Info</button> 
     <button onclick="getData('/blog/?json=get_recent_posts')">Get Recent Posts</button> 
     <button onclick="createPost()">Create Post</button> 
     <button onclick="updatePost()">Update Post</button> 
     <br><textarea id="responseTextArea" type="text" name="message" style="width: 100%;height:300px"></textarea><br><br> 
    </form> 
    </p> 
</div> 

function getData(query) { 
    var request = getRequest(); 
    document.getElementById("responseTextArea").value = "Sending request..."; 

    request.onreadystatechange = function() { 
     if (request.readyState==4 && request.status==200) { 
      document.getElementById("responseTextArea").value = request.responseText; 
     } 
    } 

    request.open("GET", query, true); 
    request.send(); 
} 

// utility method for getting asynchronous request 
function getRequest() { 
    var request; 

    if (window.XMLHttpRequest) { 
     request = new XMLHttpRequest(); 
    } 
    else { 
     request = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    return request; 
}

PS我使用JQuery是不。在Firefox 25 Mac上測試。

UPDATE：
如果我不換任何頁不重裝的按鈕！所以現在我有一個解決方法，但是這裏發生了什麼？如果我需要按鈕，我該怎麼辦？更改後的代碼：

<p> 
     <form id="myForm" name="myForm"> 
      <input type="hidden" name="nonce" id="nonce"/> 
      <input type="hidden" name="title" id="title"/> 
      <input type="hidden" name="content" id="content"/> 
     </form> 

     <button onclick="getData('/blog/?json=info')">Get JSON API Info</button> 
     <button onclick="getData('/blog/?json=get_recent_posts')">Get Recent Posts</button> 
     <button onclick="createPost()">Create Post</button> 
     <button onclick="updatePost()">Update Post</button> 
     <br><textarea id="responseTextArea" type="text" name="message" style="width: 100%;height:300px"></textarea><br><br> 
    </p>

來源

2013-12-07 1.21 gigawatts

很簡單...如果你不阻止默認處理按鈕點擊事件的形式...表單將提交（導致重新加載），因爲它應該，無論你發送一個Ajax。嘗試'onclick'嘗試'返回false;'雖然最好添加不引人注目的事件監聽器，然後你可以使用'event.preventDefault（）' – charlietfl

感謝您的解釋。 –