javascript - 使用表单包装元素并进行 AJAX 调用时重新加载页面

Question

如果我在我的文本元素周围添加一个表单并进行 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 上测试。

更新:
如果我不包装任何按钮，页面不会重新加载!所以现在我有一个解决方法，但这里发生了什么？如果我的表单中需要按钮怎么办？更改代码:

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

Answer 1

将 type="button" 添加到您的每个按钮字段，这将阻止他们提交表单。