Node.js+Express实现表单提交后弹出欢迎用户名的alert提示框

解决方案 #

这里给你两种常用实现方式，按需选择即可： #

方案1：传统表单提交（页面刷新跳转） #

不需要修改前端代码，只需要调整server.js的POST路由逻辑，服务端直接返回带弹窗脚本的HTML内容：

// server.js 替换原post路由代码
app.post('/', function(req,res) {
   const username = req.body.username;
   // 直接返回带alert脚本的响应，弹窗后可跳转回登录页
   res.send(`
    <script>
      alert('Welcome ${username}');
      // 弹窗确认后跳转回登录页，不需要跳转可以删掉这行
      window.location.href = '/';
    </script>
   `);
});

注意：该方案提交后页面会跳转，适合简单不需要保留原页面的场景，生产环境使用时建议对username做XSS转义处理，避免恶意用户名注入脚本。 #

方案2：AJAX无刷新提交（体验更好） #

需要同时调整前端HTML和后端路由，提交表单不会刷新页面：

第一步：修改index.html

给表单添加id，新增提交事件监听逻辑：

<body>     
<main class="form-signin">
    <!-- 给form添加id -->
    <form id="loginForm" method="post" action="/">
      <h1 class="h3 mb-3 fw-normal">Login</h1>
      <br/>
  
      <div class="form-floating ">
        <input type="name" class="form-control" name="username"  placeholder="Enter Username...">
        <label for="floatingInput">Username</label>
      </div>
      <div class="form-floating">
        <input type="password" class="form-control" name="password" placeholder="Enter password">
        <label for="floatingPassword">Password</label>
      </div>
      <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
    </form>
  </main>
  <!-- 新增脚本逻辑 -->
  <script>
    document.getElementById('loginForm').addEventListener('submit', async function(e) {
      // 阻止默认表单提交跳转行为
      e.preventDefault();
      // 组装表单数据
      const formData = new FormData(this);
      // 发POST请求到后端
      const res = await fetch('/', {
        method: 'POST',
        body: new URLSearchParams(formData)
      });
      const data = await res.json();
      // 前端弹出欢迎提示
      alert(`Welcome ${data.username}`);
      // 可选：清空表单内容
      this.reset();
    })
  </script>
</body>

第二步：修改server.js的POST路由

后端返回JSON格式的用户名数据：

app.post('/', function(req,res) {
   const username = req.body.username;
   res.json({ username: username });
});

两种方案修改完重启服务即可测试效果。 #

内容的提问来源于stack exchange，提问作者Saiprakash Reddy