页面在包装表单并进行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

感谢您的解释。 –