时间戳

首页 > 解决方案 > 如何在不重定向的情况下获取 PHP 脚本？

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

问题描述

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

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

这可能吗？

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

对于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;
}

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

标签： javascriptphphtml

解决方案

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

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

推荐阅读