javascript - 加载 POST 时显示 JAVASCRIPT 的问题

Question

我使用以下代码来选择数据以向用户显示，而无需移动到另一个页面。

<script type="text/javascript">
$(document).ready(function() {
  $('#testform input[name=date]').datepicker({
    autoHide: true
  });
  $('#testform').submit(send);
});

function send() {
  const data = $(this).serialize();
  $('#output').text("FormData: " + data);
  $.ajax({
    type: "POST",
    url: "receiving_file.php",
    data,
    success: function(data) {
  document.getElementById("PrintData").outerHTML = data;
  document.getElementById("PrintImg").src = data;
    }
  });
  return false;
}
</script>

为了显示输出而不转到另一个页面，我在代码中编写:

<p id="PrintData">

文件receiving_file.php中的代码如下所示:

<?php
$date = $_POST['date'];
print $date;
?>

问题是我想在传入的数据中使用 JavaScript，但它不起作用。但是，当我尝试在浏览器中查看源代码时，我看不到数据。

有人知道如何解决这个问题吗？

谢谢

Answer 1

您需要prevent the default submission behaviour否则您的表单将继续正常提交，并且您将看不到完整的 ajax 部分。

function send(e) {
    e.preventDefault(); // prevent native submission
    // ... rest of your code as before
}

我对您的示例进行了一些修改，使其在 this jsFiddle 中运行。 。您不需要所有这些更改，但是在 jsFiddle 中模拟 Ajax 请求时，您必须 POST 您想要在响应中看到的 html。