Node.js 无刷新

原创 黄良钵  2017-08-09 19:20  阅读 118 次 评论 0 条

Node.js 无刷新

此项目需要安装Node.js和npm,还有express插件、body-parser插件。deepin下安装请参考Nodejs 中 GET 传输数据

服务器端文件index.js:

  1. const express = require('express')
  2. const bodyParser = require('body-parser')
  3. // var 表示的是变量 值是可以改变的
  4. // const表示常量一旦赋值就不能再改变
  5. // cont是新特性 可以node中使用暂时不要在浏览器中使用
  6. const app = express()
  7. app.use(express.static('public'))
  8. app.use(bodyParser.urlencoded({extended:false}))
  9. app.post('/user/login',function(req,res){
  10.     var phone = req.body.phone
  11.     var password = req.body.password
  12.     var result = password == '123456'?'登录成功':'密码错误'
  13.     res.send(result)
  14. })
  15. app.listen(3000,()=>{
  16.     console.log('服务器运行了')
  17. })
  18. // (a,b)=>{
  19. //   return a +b  
  20. // }
  21. //  都是匿名函数
  22. // function(a,b){
  23. //     return a + b
  24. // }

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>无刷新</title>
  8. </head>
  9. <body>
  10.    <form action="/user/login" method="post" target="result">
  11.      <input type="tel" name="phone" placeholder="请输入手机号">
  12.      <input type="password" name="password" placeholder="请输入密码">
  13.      <input type="submit" value="登录">
  14.    </form>
  15.     <iframe src="#" frameborder="0" id='result' name="result"></iframe>
  16.     <!-- 让表单刷新iframe而不是整个页面 从而达到无刷新的效果 -->
  17.     <script src="js/index.js"></script>
  18. </body>
  19. </html>

客户端index.js

  1. var iframe = document.querySelector('#result')
  2. iframe.onload = function(){
  3.     // contentWindow属性指定的iframe或者frame所在的window对象
  4.     var result = iframe.contentWindow.document.body.innerText
  5.     alert(result)
  6. }
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情