Express（Node.js）中urlencoded解析失效：表单提交无数据且页面无限加载

嘿，我仔细看了你的代码和问题描述，发现两个核心问题导致了表单提交无数据+无限加载的情况，咱们一步一步来解决：

1. 路由处理未返回响应，导致请求挂起（无限加载的根源） #

你看你的POST /register 路由代码：

app.post('/register', urlEncodedParser, (req, res, next) => {
  if (!req.body) {
    res.send('hi' + req.body.userName);
  }
});

这里只有当req.body不存在的时候才会发送响应，但如果req.body正常解析到数据了，你的代码没有任何返回响应的逻辑！Express会一直等待你发送响应，所以页面就会无限加载下去。

哪怕只是测试，也要保证所有分支都有响应：

app.post('/register', urlEncodedParser, (req, res) => {
  if (!req.body) {
    return res.status(400).send('请求体为空');
  }
  // 有数据的时候一定要返回响应
  res.send(`收到你的用户名：${req.body.userName}`);
});

2. 确保urlencoded中间件正确全局挂载 #

你后来尝试用app.use(express.urlencoded({extended:false}))是对的——Express 4.16+已经内置了body-parser的urlencoded和json解析，不需要单独安装body-parser包了（当然装了也能用，但内置的更方便）。

不过要注意把这个中间件放在所有路由定义之前，这样所有请求都会经过解析：

const app = express();
const port = 3333;

// 全局挂载urlencoded解析中间件，放在路由前面！
app.use(express.urlencoded({ extended: false }));

// 然后再定义路由
app.get('/register', (req, res) => {
  res.render('register.hbs');
});

app.post('/register', (req, res) => {
  if (!req.body) {
    return res.status(400).send('请求体为空');
  }
  res.send(`收到用户名：${req.body.userName}`);
});

3. 额外检查：表单是否有提交动作 #

你的HTML表单里只有输入框，没有提交按钮或者JS触发提交的逻辑？可以加个提交按钮确保能触发POST请求：

<form method='post'>
  <input type='text' placeholder='input name' name='userName' />
  <!-- 加个提交按钮 -->
  <button type="submit">提交</button>
</form>

按照上面的步骤修改后，应该就能正常接收到表单数据，也不会出现无限加载的情况了！

备注：内容来源于stack exchange，提问作者Булат Хуснутдинов