使用 XMLHttpRequest 并发布答案

【问题标题】：Using XMLHttpRequest and post使用 XMLHttpRequest 并发布
【发布时间】：2021-03-20 06:00:36
【问题描述】：

表单与参数 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>

【问题讨论】：

你应该learn how to use the label element properly。如果没有 for 属性或其中的表单控件，标签是无用的。
我设置表格只是为了一些测试，但谢谢提醒..

标签： post xmlhttprequest

【解决方案1】：

提交表单时调用sendRequest方法。

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

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

如果你想运行 JavaScript，你需要阻止表单提交的默认行为。

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

【讨论】：