Question

如果我在文本元素周围添加一个Form并进行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"，这会阻止他们提交表单。

Answer 2

正如查理所说，那是默认的表单行为，如果不阻止默认行为，它将触发页面刷新。在jQuery中你可以找到提交事件，在那里你可以做一些像e.preventDefault（）;

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

2 个答案: