nodejs 引數傳遞
阿新 • • 發佈：2018-11-02
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提交過來的引數無法識別。
效果圖
