nodejs 参数传递

1、html页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script src="../../public/js/jquery.min.js"></script>
    <script src="../../public/js/hb_common.js"></script>
    <link rel="stylesheet" href="../../public/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../public/css/hb_wap.css">
    <title>nodejs参数传递</title>
</head>
<body >

<!-- 发送get请求给服务器 -->
<form action="/router1/getParams" method="get">
    <div class="form-group">
        <label>username</label>
        <input type="text" name="username" class="form-control" placeholder="username">
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" name="pwd" class="form-control" placeholder="Password">
    </div>

    <button  class="btn  btn-primary">get提交</button>
</form>

<hr>
<!-- 发送post请求给服务器 -->
<form action="/router1/postParams" method="post">
    <div class="form-group">
        <label>username</label>
        <input type="text" name="username" class="form-control" placeholder="username">
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" name="pwd" class="form-control" placeholder="Password">
    </div>

    <button  class="btn  btn-primary">post提交</button>
</form>

</body>
</html>

2、对应的控制器

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  global.console.log("/router/a : " + process.argv);
  res.render('router1/index', { name: 'Express 路由1' });
});

/*
 * 测试发送ajax请求，返回JSON给前台
  * */
router.get('/ajax', function(req, res, next) {
  res.json(200,{
    "username":"黄彪",
    "pwd":"123456"
  });
});

/*
 * form表单提交，使用的是post方法
 * 该方法用来测试获取用户提交的表单
  * */
router.get('/getParams', function(request, response, next) {
  //request.query.pwd 与 request.param("pwd") 这两种方式一致
  //只能针对get方法，如果form表单是post提交方式，则无效
  var username = request.param(username);
  var pwd = request.param(pwd);

  console.log("request.param(username) : "  + username);
  console.log("request.param(pwd) : "  + pwd);

  //向前端发送数据
  response.json(200,{
    "username":username,
    "pwd":pwd
  })
});

/*
 * form表单提交，使用的是post方法
 * 该方法用来测试获取用户提交的表单
 * 记录路径是使用“根”的相对路径
 * */
router.post('/getParams', function(request, response, next) {
  var username = request.param(username);
  var pwd = request.param(pwd);

  console.log("request.param(username) : "  + username);
  console.log("request.param(pwd) : "  + pwd);

  //向前端发送数据
  response.json(200,{
    "username":username,
    "pwd":pwd
  })
});


/*
 * form表单提交，使用的是post方法
 * 该方法用来测试获取用户提交的表单
 * 记录路径是使用“根”的相对路径
 * */
router.post('/postParams', function(request, response, next) {
  var userName = request.body.username,
      userPwd = request.body.pwd,
      userName2 = request.param('pwd'),
      userPwd2 = request.param('username');

  console.log("req.body.username : "  + request.body.username);
  console.log("req.param('pwd') : "  + request.param('pwd'));
  console.log("req.body.pwd : "  + request.body.pwd);
  console.log(" req.param('txtUserPwd') : "  +  request.param('username'));

  //向前端发送数据
  //向前端发送数据
  response.json(200,{
    "username":userName,
    "pwd":userPwd
  })
});

module.exports = router;

3、启动web应用的app.js

var express = require("express");
var http = require("http");
var app = express();

////////////////////// 获取post过来的数据 /////////////////////////////
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false }));

////////////////////// 设置模板 /////////////////////////////
var ejs = require("ejs");
//使用set方法，为系统变量“views”和“view engine”指定值。
app.set("views", __dirname + "/views");
// 指定模板文件的后缀名为html
app.set('view engine', 'html');
// 运行hbs模块
app.engine('html', ejs.__express);

////////////////////// 利用文件来拆分路由的规模 /////////////////////////////
var router = express.Router();
var router1 =  require('./routes/router1');


//设置web工程的根目录
app.use(express.static(__dirname + '/'));
app.use('/router1', router1);

http.createServer(app).listen(3000);

备注：一定要引用“body-parser”模块，不然post提交过来的参数无法识别。

工程目录结构

效果图

猜你喜欢