Node.js和html数据交互（一） form表单

一、form表单提交数据

数据流向：前端 - > 后端

1、get方法 （action是提交路径，method是提交方法，get方法可以不写）

前端：

<form action="/getuserinfo" method="get">
id:<br>
<input type="text" name="id"><br>
名字：<br>
<input type="text" name="name">
<input type="submit" value="提交">
<br>
</form>


后端：

下面为了方便使用的都是express框架，用http server里面的解析稍微有些不一样，比如需要用url模块来解析req.url，express框架的安装可以参考另一篇文章：https://blog.csdn.net/chen_soldier/article/details/87855187

router.get('/getuserinfo', function(req, res, next) {
var query = req.query;
var id = query.id;
var name = query.name;
console.log(id);
console.log(name); res.end();
});


注：末尾要加上res.end()或其他返回的html等，不然网页会一直等待

2、post方法

前端：

<form action="/login" method="POST">
name:<br>
<input type="text" name="name"><br>
password：<br>
<input type="text" name="password">
<input type="submit" value="提交">
<br>
</form>


后端：

router.post('/login', function(req, res, next) {
var body = req.body;
var name = body.name;
var password = body.password;
console.log(name);
console.log(password); res.end();
});


注：用http server需要用querystring模块来解析req.rawBody

form表单提交后会进行页面跳转，如果不希望跳转，可以在页面中定义一个不可见的iframe:

<iframe id="iframe_display" name="iframe_display" style="display: none;"></iframe>


然后将form的target指向该iframe：

<form action="/login" method="POST" target="iframe_display">


此处参考：https://www.cnblogs.com/lydiawork/p/8568954.html