Nodejs 中 POST 传输数据

Nodejs 中 POST 传输数据

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

index.js

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

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             box-sizing: border-box;
  11.         }
  12.         body{
  13.             margin: 0;
  14.         }
  15.         header{
  16.             background-color: #f93;
  17.             color: white;
  18.             height: 44px;
  19.             line-height: 44px;
  20.             text-align: center;
  21.             font-size: 18px;
  22.         }
  23.         form{
  24.             padding: 10px;
  25.         }
  26.         input,select{
  27.             display: block;
  28.             width:100%;
  29.             margin: 5px;
  30.             height: 40px;
  31.             padding: 10px;
  32.             font-size: 0.9rem;
  33.             border:1px solid silver;
  34.             /* 去掉chrome的特殊外观 */
  35.              /* -webkit-appearance: none;  */
  36.         }
  37.         .radio-group label{
  38.            display: inline-block;
  39.            width:90px;
  40.            margin: 5px auto;
  41.            height: 40px;
  42.            padding: 12px;
  43.            background-image: url(images/unselect.png);
  44.            background-size: 22px;
  45.            background-position: left center;
  46.            background-repeat: no-repeat;
  47.            font-size: 0.9rem;
  48.         }
  49.         input[type=radio]:checked+label{
  50.              background-image: url(images/select.png);
  51.         }
  52.         .radio-group input{
  53.              display: none;
  54.         }
  55.         input[type=submit]{
  56.             border-color: #e82;
  57.             background-color: #e82;
  58.             color: white;
  59.             font-size: 0.9rem;
  60.             line-height: 0.9rem;
  61.             margin-top: 15px;
  62.         }
  63.         option{
  64.             height: 36px;
  65.             display: inline-block;
  66.             line-height: 36px;
  67.             padding-top:10px;
  68.         }
  69.     </style>
  70. </head>
  71. <body>
  72.     <header>注册</header>
  73.     <form id="register" action="/user" method="POST" target="_blank">
  74.         <input type="text" name="petname" autofocus autocomplete="on"  placeholder="请输入用户名"> <br>
  75.         <!-- autofocus会让输入焦点出现指定的输入框中 -->
  76.         <!-- pattern="[\u4e00-\u9fa5a-zA-Z0-9]{2,16}"  -->
  77.         <!-- autocomplete 会记住用户之前输入的值 当双击输入时 会把之前记住的值列出来供用户选择 -->
  78.         <!-- required要求用户提交表单时必须填写 -->
  79.         <!-- 使用正则表达式 -->
  80.         <!-- []表示允许的字符范围
  81.         a-z 表示允许26个小写字母
  82.         0-9表示允许数字
  83.         \u4e00-\u9fa5a允许汉字
  84.         {2,16}最少要求2个字符 最多16个字符 -->
  85.         <input type="password" name="password" placeholder="请输入密码">
  86.         <input type="password"  placeholder="请再次输入密码">
  87.         <!-- 如果两个普通input的name相同会导致同一个名字提交两个数据 -->
  88.         <div class="radio-group">
  89.             <input type="radio" name="isMale" id="male" checked>
  90.             <label for="male">先生</label>
  91.             <input type="radio" name="isMale" id="famale">
  92.             <label for="famale">先生</label>
  93.         </div>
  94.         <select name="course">
  95.             <option value="HTML5">HTML5</option>
  96.             <option value="CSS">CSS</option>
  97.             <option value="JavaScript">JavaScript</option>
  98.         </select>
  99.         <!-- <input type="submit" value="提交"> -->
  100.     </form>
  101.     <input type="submit" form="register" name="test" placeholder="会提交吗" formnovalidate>
  102.     <!--
  103.     使用form属性可以将表单元素放在表单外面 去提交 form属性的值必须是另一个form的id
  104.     formnovalidate 可以单独在未验证状态下直接提交表单
  105.     formmethod
  106.     formtarget
  107.     formaction 都可以单独控制
  108.      -->
  109. </body>
  110. </html>
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇