Nodejs系列课程(七)--如何提交表单并接收参数?

如果要做一个网站应用，不可避免的会遇到表单的提交及获取参数的值，下面我们来看看用node.js + express怎么做

先来构建一个表单简单模拟登录GET方式提交数据

1.打开subform.ejs文件，修改文件代码为如下：

      <%= title %>                   <% include nav %>                      用户名：          密码：                      

2.打开subform.js我们试着接收参数值并输出到控制台

var express = require('express');var router = express.Router();router.get('/', function(req, res) {  var   userName = req.query.txtUserName,  userPwd = req.query.txtUserPwd,  userName2 = req.param('txtUserName'),  userPwd2 = req.param('txtUserPwd');  console.log('req.query用户名:'+userName);  console.log('req.query密码:'+userPwd);  console.log('req.param用户名:'+userName2);  console.log('req.param密码:'+userPwd2);  res.render('subform', { title: '提交表单及接收参数示例' });});module.exports = router;subform.js get方式源码

3.运行，并提交表单 在浏览器中运行：http://localhost:3000/subform，输入表单项并提交，可以发现url发生了变化

我们再看看控制台的输出

我们完成了GET方式提交表单并接收到了值，不错_!（稍后在后面再去讲得到值的方式和区别）

再来在上面的代码基础上去修改一下表单的method简单模拟登录POST方式提交数据

1.首先修改一下subform.ejs文件中的form标签，修改为如下：

...

2.再在subform.js中添加代码，接收post提交、接收参数并输出到控制台

...router.post('/',function(req, res){  var   userName = req.body.txtUserName,  userPwd = req.body.txtUserPwd,  userName2 = req.param('txtUserName'),  userPwd2 = req.param('txtUserPwd');  console.log('req.body用户名:'+userName);  console.log('req.body密码:'+userPwd);  console.log('req.param用户名:'+userName2);  console.log('req.param密码:'+userPwd2);　res.render('subform', { title: '提交表单及接收参数示例' });});...

3.运行，并提交表单 在浏览器中运行：http://localhost:3000/subform，输入表单项并提交，可以发现url不会发生变化

我们再看看控制台的输出

再回过头看看GET和POST方式接收值，从直接效果上来看

req.query：我用来接收GET方式提交参数

req.body：我用来接收POST提交的参数

req.params：两种都能接收到 大家自行看看Express的Request部分的API:http://expressjs.com/en/api.html#req.params

这里着重解释一下req.body，Express处理这个post请求是通过中间件bodyParser，你可以看到app.js中有一块代码

...var bodyParser = require('body-parser');...app.use(bodyParser.json());app.use(bodyParser.urlencoded());...

没有这个中间件Express就不知道怎么处理这个请求，通过bodyParser中间件分析 application/x-www-form-urlencoded和application/json请求，并把变量存入req.body，这种我们才能够获取到！