首页 > 解决方案 > 输入文本日期(2021 年 4 月 4 日)并显示时间戳

问题描述

我想在我的 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>

标签: phpjqueryajax

解决方案


考虑以下 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,我们可以从表单中收集值并将其发送到您的脚本。然后,您将需要处理脚本返回的数据。

e.preventDefault是一个事件命令,用于阻止表单的默认事件。

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

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

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

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

这是一个超级速成课程。


推荐阅读