龙空技术网

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

前卫的依伯 196

前言:

现时咱们对“html自动提交表单”大约比较注意,咱们都需要剖析一些“html自动提交表单”的相关内容。那么小编也在网络上收集了一些对于“html自动提交表单””的相关知识,希望我们能喜欢,朋友们快快来了解一下吧!

如果要做一个网站应用,不可避免的会遇到表单的提交及获取参数的值,下面我们来看看用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.运行,并提交表单 在浏览器中运行:,输入表单项并提交,可以发现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.运行,并提交表单 在浏览器中运行:,输入表单项并提交,可以发现url不会发生变化

我们再看看控制台的输出

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

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

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

req.params:两种都能接收到 大家自行看看Express的Request部分的API:

这里着重解释一下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,这种我们才能够获取到!

标签: #html自动提交表单