如何获取保存在表单(html)中的数据

Question

我对html一无所知，需要你的帮助才能做点什么。

我写了这个代码：

<form action="Programmierung/1.html">
<table>
<tr>
<td><label for = "name">Name</label></td>
</tr>
<tr>
<td><input id="name" type="text" size="15"/></td>
</tr>
<tr>
<td><label for = "vorname">Vorname</label></td>
</tr>
<tr>
<td><input id="vorname" type="text" size="15"/></td>
</tr>
<tr>
<td><label for = "geburtsdatum">Geburtsdatum</label></td>
</tr>
<tr>
<td><input id="geburtsdatum" type="date"/></td>
</tr>
<tr>
<td><label for = "strasse">Straße</label></td>
<td><label for = "hausnummer">Hausnummer</label></td>
</tr>
<tr>
<td><input id="strasse" type="text" size="15"/></td>
<td><input id="hausnummer" type="text" size="15"/></td>
</tr>   
<tr>
<td><label for = "plz">Postleittzahl</label></td>   
<td><label for = "ort">Ort</label></td>
</tr>
<tr>
<td><input id="plz" type="text" size="15"/></td>
<td><input id="ort" type="text" size="15"/></td>
</tr>
<tr>
</table>
<br><br>
<table>
<td><input type="submit" value="01: Personenbezogene Daten"/></td>
</table> 
</form>

我想将所有变量发送到另一个名为"的html页面；1.html"；，但我不知道怎么做。我做错了什么？我需要php吗？如果是，我该如何实现它？

Answer 1

现在不需要使用表单将数据传输到其他页面。20世纪90年代就是这样做的。。。但今天，我们使用AJAX。

使用表单，用户输入数据，单击提交，页面发送数据并导航到另一个页面。视图实际上会切换到另一个页面。

AJAX甚至比处理表单更简单，尤其是如果您使用jQuery$.ajax().done()代码块。使用AJAX，您可以：

a。从用户输入中收集数据(jQuery有一个简单的方法叫.serialize()，它只创建一个键值对对象，这些键值对表示表单控件及其值，所有这些都可以发送到AJAX代码块中的后端处理文件。纯javaScript也可以做类似的事情，但你可以从.serialize()中了解需要什么)

b。指定服务器端处理文件(.PHP文件很容易做到，见下文)

c。当用户点击"；提交"；，数据被发送到.php文件，您在那里接收它并对它做一些操作，然后.php文件(使用php命令echo)向AJAX代码块的.done()部分发送一个string数据，在.done()块内，您从php端接收数据，然后

d。仍然在.done()块内，您有机会使用新接收的数据修改网页。

例如，您可以：

• 将登录信息发送到.php文件，它可以通过或失败、0或1响应。或者，php端可以发回一些未经身份验证的用户不允许看到的隐藏数据。

• 将地址发送到后端文件，php文件可以将其插入数据库(例如MySQL或MariaDB)

• 将测试答案发送到后端文件，它可以用正确的答案做出响应，也可以只用1/0(通过/失败)做出响应。

当ajax代码块完成时，用户仍在同一页面上，但页面可能已更新为新信息。因此，如果您的页面上发生了多个ajax事件，您可以根据需要与用户进行所有交互，而不需要其他页面。

重要提示：

1. jQuery现在已经过时了。Vanillajavascript自2015年以来有了很大改进，Fetch API几乎和jQuery的$.ajax()一样易于使用。然而，它更难解释，对于初学者来说仍然有点困难。我建议您学习$.ajax()的方法，然后尝试切换到使用Fetch。

2. 您仍然可以使用<form>容器和提交按钮，但不在表单上放置action=属性——后端处理文件是在$.ajax()代码块中指定的。

3. 最重要的是，如果您使用表单，您必须捕获提交按钮上的点击事件(使用javascript)，并使用event.preventDefault()阻止表单尝试离开当前页面。参见以下示例：

AJAX与表单提交

单击按钮时，如何发送包含表单中数据的电子邮件？

ajax响应后未更新的值

如何制作Ajax联系人表单

实现PHP

很容易。只需将文件从1.html重命名为1.php即可。完成。

在任何.php文件中，实际的php代码都必须用"；"开始"；以及"；完成"；看起来像这样的标签：

<?php启动，

?>完成。

通常，文件以<?php开头。。。并且如果整个文件是php代码，则可以省略最终的CCD_ 20。如果您使用php文件作为AJAX的后端处理文件，那么整个文件通常是php-在这种情况下，您将以<?php开始文件，当您将数据echo返回客户端页面时，处理将结束(通常称为index.html或index.php或类似的文件)。

请注意，以.php结尾的文件根本不需要包含任何php代码。。。您可以将所有的.html文件重命名为.php，一切都将保持不变。唯一的区别是，现在您可以在该文件中使用.php代码——然而，在用户有机会与页面交互之前，php代码将在开始时一次性处理。

(这是AJAX的另一个好处-一个常见的问题是"我如何运行更多的PHP代码"，答案是："通过陷阱进行另一个AJAX调用的用户事件")