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">

receive_file.php文件中的代码如下：

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

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

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

谢谢

Answer 1

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

User

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

Answer 2

如果我正确理解了您的问题，那么问题应该是您正在尝试修改元素的externalHTML而不是innerHTML：

document.getElementById("PrintData").outerHTML = data;

应为：

document.getElementById("PrintData").innerHTML = data;

outerHTML修改HTML标记本身，而不是其内容。

加载POST时显示JAVASCRIPT时出现问题

2 个答案: