搭建好服务器后
（前言，本文只是介绍form表单直接提供给 本页面数据，即在不刷新页面的前提下更改数据）
在public里面添加index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="node_modules/jquery/dist/jquery.min.js"></script> 7 </head> 8 <body> 9 <form method="post" action="hello"> 10 <label> 11 name: 12 <input type="text" name="name" required="required"> 13 </label> 14 <input type="submit" value="submit"> 15 </form> 16 <div id="result"></div> 17 <script src="main.js"></script> 18 </body> 19 </html>
在新建个main.js
1 (function () { 2 3 $("form").on("submit", function (e) { 4 e.preventDefault(); 5 6 // console.log(this["name"].value, this.action, this.method); 7 8 $.post(this.action, {name: this["name"].value}).done(function (data) { 9 $("#result").html(data); 10 }).fail(function (err) { 11 alert("无法连接服务器"); 12 }); 13 }); 14 15 })();
在routes里面的index文件中添加如下代码
1 router.post("/hello", function (req, res) { 2 res.render("hello", {name: req.body.name}); 3 });
再在views文件夹下添加hello.jade文件
1 html 2 head 3 title = "hello" 4 body 5 div hello #{name};
ok,运行即可
补充一下，send和render的区别
send:直接处理数据，作用：把数据传到<body>标签中，只能传来get,即传过来搜索框中的内容（处理的是直接的数据）
render:意为渲染，作用，把一个文件渲染后，传到<body>标签中，使用post处理过得数据，传送给那个文件，后在传到<body>标签中。（处理的是文件）