前言:
现时咱们对“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自动提交表单