javascript - 如何在不重定向的情况下获取 PHP 脚本？

Question

编辑:我已经解决了重定向问题和错误；但是，现在当我提交表单数据时，它是未定义的。我已更新提供的代码以反射(reflect)更改。

我有一个 PHP 脚本，它执行查询并回显一些 HTML 标记。我正在尝试使用 javascript 来获取标记并更新 DOM，而不触发重定向。

这可能吗？

尝试操作 DOM 时还会收到 TypeError。对此相当陌生，所以不太确定我哪里出错了。

对于TypeError，我尝试使用 DOMContentLoaded 但这会破坏我的表单输入字段。为了简洁起见，提供了简化的代码。

PHP 脚本:

<?php
    if(!include('../connect.php')){
        die('error retrieving connect.php');
    }

    try {
        $dbh = ConnectDB();

        if(isset($_POST['startDate'], $_POST['endDate'])){
            $startDate = $_POST['startDate'];
            $endDate = $_POST['endDate'];

            echo '<table><tr><th>' .$startDate. '</th>' . '<th>' .$endDate. '</th></tr></table>';
        }
    } catch (Exception $e){
        die($e);
    }
?>

HTML 代码:

<div id="desktopMetrics" style="display: none">
    <form method="post" action="api/get_desktop_metrics.php" name="desktopMetricsForm" id="desktopMetricsForm">
        <div class="form-row justify-content-center">
            <div class="col">
                <div class="form-group">
                  <label class="form-label" for="start">Start date:</label>
                  <input class="form-control" type="date" id="startDate" name="startDate" placeholder="yyyy-mm-dd" value="<?php echo date('Y-m-d')?>" > 
                </div>
            </div>
            <div class="col">
                <div class="form-group">
                  <label class="form-label" for="end">End date:</label>
                  <input class="form-control" type="date" id="endDate" name="endDate" placeholder="yyyy-mm-dd" value="<?php echo date('Y-m-d')?>" >
                </div>
            </div>
            <div class="col">
                 <input class="btn btn-success" type="submit" value="Submit">
            </div>
        </div>
    </form>
    <div class="col" id="desktopMetricsTable"></div>
</div>

Javascript代码:

$(document).ready(function () {
    const desktopMetricsForm = document.getElementById("desktopMetricsForm");
    desktopMetricsForm.addEventListener('submit', function (event) {
        event.preventDefault();
        const formattedFormData = new FormData(desktopMetricsForm);
        desktopMetricsPostData(formattedFormData);
    })
})

async function desktopMetricsPostData() {
    const response = await fetch('api/get_desktop_metrics.php', {
      method: 'GET',
      headers: {
          "Content-Type": "application/x-www-form-urlencoded",
      },
      body: formattedFormData
    });
    const data = await response.text();
    document.getElementById("desktopMetricsTable").innerHTML = data;
}

我希望在提交时，标记将被提取并插入到带有 id="desktopMetricsTable" 的空 div 的 innerHTML 中。目前，标记已获取，但在新页面上以纯文本形式显示。

Answer 1

该函数应该在“提交”事件而不是“点击”事件下执行

const desktopMetricsForm = document.getElementById("desktopMetricsForm");
  desktopMetricsForm.addEventListener('submit', function (event) {
    const formattedFormData = new FormData(form);
    desktopMetricsPostData(formattedFormData);
    return false;
  })

  async function desktopMetricsPostData() {
    const response = await fetch('api/get_desktop_metrics.php', {
      method: 'GET',
      headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
      body: formattedFormData
    });
    const data = await response.text();
    document.getElementById("desktopMetricsTable").innerHTML = data;
  }