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.
8. app.use(express.static('public'))
9. app.use(bodyParser.urlencoded({extended:false}))
10. app.post('/user/login',function(req,res){
11.     var phone = req.body.phone
12.     var password = req.body.password
13.     var result = password == '123456'?'登录成功':'密码错误'
14.     res.send(result)
15. })
16.
17. app.listen(3000,()=>{
18.     console.log('服务器运行了')
19. })
20. // (a,b)=>{
21. //   return a +b  
22. // }
23. //  都是匿名函数
24. // function(a,b){
25. //     return a + b
26. // }

**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. }