Question

一段时间以来，我一直在寻找解决方案，但是找不到。

我的公司有很多用于工作的网络工具，我的任务是将它们全部合并到仪表板页面中。我的一位同事开始了这个项目，但是在他离开之前从未完成过，所以现在我必须弄清楚这个问题，并且存在很多问题。

仪表板页面由几个侧边栏以及一个“主要”元素组成。侧边栏包含一堆链接，单击这些链接可通过调用jQuery AJAX将特定的php页面加载到“ main”中。这是一个简化的示例：

<html>
<head>
<script>
  $(function() {
    $("#pageToLoad").click(function() {
      $.ajax({
        url: "some_directory/pageToLoad.php",
        success: function(result) {
          $("#main").html(result);
        }
      });
    });
  });
</script>
</head>
<body>
  <a href="#pageToLoad" id="pageToLoad">Load Page</a>
  <main id="main"></main>
</body>
</html>

这里的问题是我们的大多数工具都使用通过POST提交的表单，然后使用PHP进行解析（必须是php，因为它连接到我们的数据库以获取所需的信息）。这是工具页面的简化示例：

<?php
  $action = htmlspecialchars($_SRVER["PHP_SELF"]);
  function getResults() {
    if(isset($_POST["infoForQuery"])) {
      //Do some sort of query to database and print out results
    }
  }
?>
<body>
  <form action="<?php echo $action;?>" method="post">
    <input type="text" name="infoForQuery">
    <input type="submit" value="submit" />
  </form>
  <div>
    <?php getResults();?>
  </div>
</body>

我需要能够在仪表板页面内使用这些工具，但是每当我尝试提交表单时，它只会重新加载整个仪表板页面，从而导致POST数据不存在（也许是因为PHP代码是在ajax将内容加载到仪表板页面之前运行？不确定）。

我知道我可以像这样使用AJAX发送POST：

$(function() {
  $('form').on('submit', function (e) {
    e.preventDefault();
    $.ajax({
      type: 'post',
      url: 'some_directory/pageToLoad.php',
      data: $('form').serialize(),
      success: function() {
        alert('form submitted');
      }
    });
  });
});

但是，这不允许我使用表单中收集的数据来查询数据库并在页面上打印结果。

是否可以不必离开仪表板页面来完成此操作？如果可以，怎么办？

编辑：我相信我已经解决了！我没有意识到的是，当我覆盖了Submit函数并使用ajax发送帖子时，我实际上可以检索该帖子的结果并将其放入我的页面中。这是我所做的：

<script>
$('form').on('submit', function (e) {
    e.preventDefault();
    $.ajax({
        url: 'some_directory/pageToLoad.php',
        type: 'post',
        data: $('form').serialize(),
        success: function(result) {
            $("#main").html(result);
        }
    });
});
</script>

Answer 1

可能是因为未触发Submit事件。由于您的表单是动态加载的，因此请执行以下操作：

$(function() {
  $(document).on('submit', 'form', function (e) {
    e.preventDefault();
    $.ajax({
      type: 'post',
      url: 'some_directory/pageToLoad.php',
      data: $('form').serialize(),
      success: function() {
        alert('form submitted');
      }
    });
  });
});

提交供AJAX加载的PHP内部内容使用的表单

1 个答案: