Nodejs 中 POST 传输数据

上图是下面将要使用的项目文件位置

index.js

var express = require('express')
var bodyParser = require('body-parser')
var app = express()
app.use(express.static('public'))
// app对象的use方法表示使用中间件
// 中间件是插入在请求响应过程中的一个处理程序
// 可以在处理请求之前预先处理数据或处理请求之后进行清理
// bodyParser的作用是将浏览器发送的请求转换为body对象
// 供程序处理请求时使用
// urlencoded 处理url的编码数据通常是表单提交数据
// extended:true表示使用一种更强大的url编码格式可以处理比较复杂的数据
app.use(bodyParser.urlencoded({extended:false}))
// post表示处理一个由浏览器发过来的post请求
// /user表示只处理发送到这个url的请求
// 第二个参数function请求处理函数
// req表示所有浏览器发送请求数据及相关信息（请求）
// res表示将要发送给浏览器的所有数据（响应）
app.post('/user',function(req,res){
// post请求的数据不再查询字符串里
// 而在请求体中所以需要从请求体中获取数据
// 请求体中获取数据借助于body-parser模块
// 安装body-parser的方法
// 在命令行中运行(切换到当前的文件夹)
// npm install body-parser --save
// npm node package manager 是Node.js包管理工具
// install可以简写i
// body-parser 要安装的模块
// --save 将安装的模块包的名字保存到package.json文件中
var name = req.body.petname
var password = req.body.password
res.status(200).send('<strong>你提交的数据是</strong>' + name +　'<br>' + password)
})
app.listen(3000,function(){
console.log('服务器运行了')
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
body{
margin: 0;
}
header{
background-color: #f93;
color: white;
height: 44px;
line-height: 44px;
text-align: center;
font-size: 18px;
}
form{
padding: 10px;
}
input,select{
display: block;
width:100%;
margin: 5px;
height: 40px;
padding: 10px;
font-size: 0.9rem;
border:1px solid silver;
/* 去掉chrome的特殊外观 */
/* -webkit-appearance: none; */
}
.radio-group label{
display: inline-block;
width:90px;
margin: 5px auto;
height: 40px;
padding: 12px;
background-image: url(images/unselect.png);
background-size: 22px;
background-position: left center;
background-repeat: no-repeat;
font-size: 0.9rem;
}
input[type=radio]:checked+label{
background-image: url(images/select.png);
}
.radio-group input{
display: none;
}
input[type=submit]{
border-color: #e82;
background-color: #e82;
color: white;
font-size: 0.9rem;
line-height: 0.9rem;
margin-top: 15px;
}
option{
height: 36px;
display: inline-block;
line-height: 36px;
padding-top:10px;
}
</style>
</head>
<body>
<header>注册</header>
<form id="register" action="/user" method="POST" target="_blank">
<input type="text" name="petname" autofocus autocomplete="on" placeholder="请输入用户名"> <br>
<!-- []表示允许的字符范围
a-z 表示允许26个小写字母
0-9表示允许数字
\u4e00-\u9fa5a允许汉字
{2,16}最少要求2个字符最多16个字符 -->
<input type="password" name="password" placeholder="请输入密码">
<input type="password" placeholder="请再次输入密码">
<div class="radio-group">
<input type="radio" name="isMale" id="male" checked>
<label for="male">先生</label>
<input type="radio" name="isMale" id="famale">
<label for="famale">先生</label>
</div>
<select name="course">
<option value="HTML5">HTML5</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</select>
</form>
<input type="submit" form="register" name="test" placeholder="会提交吗" formnovalidate>
<!--
使用form属性可以将表单元素放在表单外面去提交 form属性的值必须是另一个form的id
formnovalidate 可以单独在未验证状态下直接提交表单
formmethod
formtarget
formaction 都可以单独控制
-->
</body>
</html>

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论