HTML+JS+Node.js 实现网页表单数据提交保存到服务器

要实现这个功能，你可以使用 JavaScript 的 fetch API 来将数据发送到服务器，然后使用 Node.js 来保存数据到 txt 文件。下面是一个简单的示例代码：\n\nHTML 文件 (index.html)：\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <title>提交信息</title>\n</head>\n<body>\n <h1>输入手机号和姓名</h1>\n <input type="text" id="name" placeholder="姓名"><br>\n <input type="text" id="phone" placeholder="手机号"><br>\n <button onclick="submitForm()">提交</button>\n\n <script src="script.js"></script>\n</body>\n</html>\n\n\nJavaScript 文件 (script.js)：\njavascript\nfunction submitForm() {\n var name = document.getElementById("name").value;\n var phone = document.getElementById("phone").value;\n\n var data = {\n name: name,\n phone: phone\n };\n\n fetch("/saveData", {\n method: "POST",\n headers: {\n "Content-Type": "application/json"\n },\n body: JSON.stringify(data)\n })\n .then(function(response) {\n if (response.ok) {\n window.location.href = "/success.html";\n } else {\n throw new Error("提交失败");\n } \n })\n .catch(function(error) {\n console.log(error);\n });\n}\n\n\nNode.js 服务器代码 (server.js)：\njavascript\nconst express = require('express');\nconst fs = require('fs');\nconst app = express();\nconst port = 3000;\n\napp.use(express.json());\n\napp.post('/saveData', (req, res) => {\n const data = req.body;\n\n // 将数据保存到 txt 文件\n const text = `姓名: ${data.name}\n手机号: ${data.phone}\n\n`;\n fs.appendFile('data.txt', text, function(err) {\n if (err) {\n console.log(err);\n res.status(500).send("保存数据失败");\n } else {\n res.sendStatus(200);\n } \n });\n});\n\napp.use(express.static('public'));\n\napp.listen(port, () => {\n console.log(`服务器运行在 http://localhost:${port}`);\n});\n\n\n在你的项目目录下创建一个名为 public 的文件夹，并在其中创建一个 success.html 文件，用于显示提交成功的页面。你可以根据需要自定义这个文件的内容。\n\n这个示例使用 Express 框架来创建 Node.js 服务器，使用 express.json() 中间件来解析请求的 JSON 数据。服务器将数据保存到 data.txt 文件中。你可以根据需要修改文件名和保存方式。\n\n确保你已经安装了 Node.js 和 Express 模块。在命令行中进入到项目目录，运行 node server.js 启动服务器。\n\n然后，你可以在浏览器中打开 index.html 文件，输入手机号和姓名，点击提交按钮，数据将被发送到服务器并保存到 txt 文件中。随后会自动跳转到 success.html 页面。