• 当前标签:POST

程序开发 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>         <!-- autofocus会让输入焦点出现指定的输入框中 -->         <!-- pattern="[\u4e00-\u9fa5a-zA-Z0-9]{2,16}"  -->         <!-- autocomplete 会记住用户之前输入的值 当双击输入时 会把之前记住的值列出来供用户选择 -->         <!-- required要求用户提交表单时必须填写 -->         <!-- 使用正则表达式 -->         <!-- []表示允许的字符范围         a-z 表示允许26个小写字母         0-9表示允许数字         \u4e00-\u9fa5a允许汉字         {2,16}最少要求2个字符 最多16个字符 -->         <input type="password" name="password" placeholder="请输入密码">         <input type="password"  placeholder="请再次输入密码">         <!-- 如果两个普通input的name相同会导致同一个名字提交两个数据 -->         <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>         <!-- <input type="submit" value="提交"> -->     </form>     <input type="submit" form="register" name="test" placeholder="会提交吗" formnovalidate>     <!--     使用form属性可以将表单元素放在表单外面 去提交 form属性的值必须是另一个form的id     formnovalidate 可以单独在未验证状态下直接提交表单     formmethod     formtarget     formaction 都可以单独控制      --> </body> </html>

2017-08-08 19:50:45 38 0 0
阅读详情
  • 1
前往