正文

如何避免Express.js中表单重复提交，轻松掌握防重复提交技巧

/0 浏览量
0422

在Express.js中，防止表单重复提交是一个常见且重要的任务。重复提交可能会导致数据库中的数据不一致，甚至可能引起服务器过载。以下是一些避免Express.js中表单重复提交的方法和技巧。

使用Token验证

基本原理

Token验证是一种常见的防止表单重复提交的技术。它的工作原理是在用户提交表单之前，服务器生成一个唯一的Token，并将这个Token存储在用户的会话（session）中。当用户提交表单时，服务器会检查请求中携带的Token是否与存储在会话中的Token相匹配。

实现代码

以下是一个简单的Token验证示例：

const express = require('express');
const session = require('express-session');
const app = express();

app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true }
}));

app.get('/', (req, res) => {
  if (!req.session.token) {
    req.session.token = Math.random().toString(36).substring(2, 15);
  }
  res.render('form', { token: req.session.token });
});

app.post('/submit', (req, res) => {
  if (req.body.token === req.session.token) {
    // 处理表单提交
    req.session.token = null; // 重置Token
    res.send('表单提交成功！');
  } else {
    res.status(400).send('表单重复提交！');
  }
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

利用HTTP缓存控制

基本原理

通过设置HTTP缓存控制头，可以防止浏览器缓存表单数据。这可以通过设置Cache-Control头部为no-cache来实现。

实现代码

以下是一个设置HTTP缓存控制头的示例：

app.use((req, res, next) => {
  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
  res.setHeader('Pragma', 'no-cache');
  res.setHeader('Expires', '0');
  next();
});

使用JavaScript前端验证

基本原理

在客户端使用JavaScript验证表单，确保在提交表单之前用户已经进行了必要的操作，从而避免重复提交。

实现代码

以下是一个简单的JavaScript前端验证示例：

<form id="myForm">
  <input type="text" name="username" required>
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', (event) => {
  event.preventDefault();
  // 在这里添加验证逻辑
  // 如果验证通过，使用AJAX提交表单
});
</script>

总结

以上介绍了三种在Express.js中防止表单重复提交的方法。根据具体的应用场景和需求，可以选择合适的方法来确保应用的稳定性和数据的一致性。

-- 展开阅读全文 --