存储数据的简单前端的最佳方法

Question

我有一个简单的页面，显示4个不同的div，全部带有<h1>标题（或其他显示文本的标签）和一个表单（带有1个输入文本）和一个提交按钮...到目前为止好。

我的回答很简单：我正在寻找一种方式：

1. 当用户插入文本并提交表单时，<h1>标题会显示用户编写的文本
2. 表单消失（或采用样式display:none）
3. 即使我在另一台计算机上刷新页面或查看页面（可能需要将数据保存在数据库中），这也会生效。
4. 从头开始重新启动此过程（即使我需要再次编码）。

这是一个迷你游戏，为用户提供4种不同的选择，如果用户A选择选项1，<h1>将显示类似"User A was the first to choose this option. Please select a blank option"的文本，并且在第1次原始结束后（上述第4点），重新启动所有表格。

注意：我不是在问“请为我做代码”。我还在<php ?> - 查找redbeanphp项目中搜索存储数据的方法。 我也是SQL的新手（上个月开始学习SQLi到android开发）。我的问题是仅寻找最好的方法来做到这一点以及我需要的东西。

Answer 1

这将是工作流程：

1. 当您单击按钮提交表单时，JavaScript会将表单数据作为AJAX请求发送到服务器，并等待服务器的响应。

2. 服务器上的PHP代码将从AJAX请求中读取数据并将其保存在数据库中，并回显成功响应以及要显示的文本。

3. 您的JavaScript将收到此成功消息并从DOM隐藏表单并在标题中显示文本。

4. 如果您希望数据在重新加载时保留在页面上，则可以在PHP会话中保存标志。在您关闭浏览器窗口之前，会话一直存在。

4.1使用另一个AJAX调用从会话中删除该标志并重新加载内容。

所以，如果您对HTML和CSS很满意，那么：

1. JavaScript，AJAX，一个简化JQuery的JavaScript库。

2. 服务器端语言，如PHP。

3. 用于保存数据的数据库。有很多选择。我打算推荐MySQL，因为那里有很多教程。