输入文本日期(2021年4月4日)并显示时间戳

Question

我想在我的PHP页面上放一个小表单，只需一个输入和一个提交。单个输入将用于文本日期(2021年4月4日(。提交后，我只想在表单旁边显示该输入的时间戳

我希望这可以在不离开页面的情况下完成，因为通常我需要同时使用另一种形式的时间戳。

我研究过jquery和ajax，但这有点超出了我的专业范围。有人能给我指正确的方向吗？

我希望做的事：

<form id="show_date" method="post">
Payment Date: <input type="text" name="pay_date">
<input type="submit" value="Calculate">
</form>
<div id="result"></div>

Answer 1

考虑下面的jQuery示例。

$(function() {
$("#show_data").submit(function(e) {
e.preventDefault();
$.post("./calcPayDate.php", {
pay_date: $("input[name='pay_date']", this).val()
}, function(results) {
$("#result").html(results);
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="show_date" method="post">
Payment Date: <input type="text" name="pay_date">
<input type="submit" value="Calculate">
</form>
<div id="result"></div>

jQuery是一个JavaScript框架。您需要JavaScript才能在"；背景"；。这就是AJAX。浏览器可以向服务器发送一点数据，服务器可以在不加载整个网页的情况下做出响应。

在HTML中，表单的默认行为将通过GET或POST将数据发送到另一个页面(通常是服务器端脚本(。

使用JavaScript，或者在本例中使用jQuery，我们可以从表单中收集Value并将其发送到您的Script。然后，您将需要处理脚本返回的数据。

e.preventDefault是一个事件命令，用于阻止窗体的默认事件。

$.post()是jQuery中AJAX POST方法的简写形式。

$("input[name='pay_date']", this).val()从特定输入中获取值。

function(results)是一个匿名回调函数，它接收发回的数据并将其分配给results变量。

$("#result").html(results);将数据放入容器中。

这是一个超级速成班。