使用 XMLHttpRequest 和 post

Question

表单在参数 action=“（php 文件的路径）”下工作正常，但是当我尝试使用 XMLHttpRequest 时，我没有得到任何响应。我想使用 XMLHttpRequest 的原因是我想将响应（文本）保存到一个数组中。

function receivedData(serverReply) {
        if (serverReply.readyState == 4 && serverReply.status == 200) {
            document.getElementById('main').innerText = serverReply.responseText;
            }
        else {
            console.debug('problem ' + serverReply.errorCode);
        }
    }

    function sendRequest() {
        let myForm = new FormData(document.getElementById('timeDateFormId'));
        let xhr = new XMLHttpRequest();
        xhr.open("POST", "get3.php");
        xhr.addEventListener('readystatechange', function () { receivedData(xhr) }, false);
        xhr.send(myForm);
    }

    document.getElementById('timeDateFormId').addEventListener('submit', sendRequest, false)

<form id="timeDateFormId" method="post">
    <label>From date (YYYYMMDD)</label>
    <input type="text" name="fDate">
    <br>
    <label>To date (YYYYMMDD)</label>
    <input type="text" name="tDate">
    <br>
    <label>From time (HH:MM)</label>
    <input type="text" name="fTime">
    <br>
    <label>To time (HH:MM)</label>
    <input type="text" name="tTime">
    <br>
    <input type="submit" name="submit" value="go">
</form>

Answer 1

您在提交表单时调用了 sendRequest 方法。

提交表单会使浏览器导航到表单提交的响应。

这会加载一个取消 Ajax 请求的新页面。

如果您想运行 JavaScript 而不是.

，您需要阻止表单提交的默认行为

function sendRequest(evt) {
    evt.preventDefault();
    // etc

使用 XMLHttpRequest 和 post

Using XMLHttpRequest and post

post

xmlhttprequest