当前位置:   article > 正文

在前端html页面中向服务器发送post登录请求_html post

html post

目录

前言

搭建服务器

搭建前端登录页面

获取表单值

使用axios发送post登录请求


前言

一般在html页面中向服务器发送post请求的模块为登录请求,本文将介绍如何向服务器发送post请求

搭建服务器

如何搭建服务器请看JWT认证这篇文章,有详细的解说。这里之所以使用JWT认证是因为在前端html页面发起post请求会有跨域问题。这里直接附上完整代码

  1. // 导入express模块
  2. const express = require('express')
  3. // 创建express服务器实例
  4. const app = express()
  5. // 导入jwt相关的包
  6. const jwt = require('jsonwebtoken')
  7. const expressJWT = require('express-jwt')
  8. // 允许资源跨域共享
  9. const cors = require('cors')
  10. app.use(cors())
  11. // 解析post提交的表单数据
  12. app.use(express.urlencoded({extended:false}))
  13. // 定义secret密钥
  14. const secretKey= 'notbald'
  15. // 登录接口
  16. app.post('/post',(req,res)=> {
  17. const userinfo = req.body
  18. if(userinfo.username !=='admin'||userinfo.password!=='000000'){
  19. return res.send({
  20. status:400,
  21. msg:'登录失败',
  22. hh:userinfo
  23. })
  24. }
  25. const tokenStr = jwt.sign({username:userinfo.username},secretKey,{expiresIn:'60s'})
  26. res.send({
  27. status:200,
  28. msg:'登录成功',
  29. token:tokenStr
  30. })
  31. })
  32. // 将JWT字符串还原为JSON对象
  33. app.use(expressJWT.expressjwt({
  34. secret:secretKey,
  35. algorithms:["HS256"]
  36. }))
  37. // get请求
  38. app.get('/get',(req,res)=>{
  39. res.send({
  40. status:200,
  41. message:'获取用户信息成功',
  42. data:{
  43. username:req.auth.username
  44. }
  45. })
  46. })
  47. // 使用全局错误处理中间件,捕获解析 JWT 失败后产生的错误
  48. app.use((err, req, res, next) => {
  49. // 这次错误是由 token 解析失败导致的
  50. if (err.name === 'UnauthorizedError') {
  51. return res.send({
  52. status: 401,
  53. message: '无效的token',
  54. })
  55. }
  56. res.send({
  57. status: 500,
  58. message: '未知的错误',
  59. })
  60. })
  61. // 启动服务器
  62. app.listen(3000,()=> {
  63. console.log('server running the localhost http://127.0.0.1:3000')
  64. })

注意,这里不要使用80端口,如果使用80端口,当发起post请求时服务器引入了cors仍然会报跨域问题

搭建前端登录页面

html

  1. <form action="" name="myform" class="myform">
  2. <div>用户名:<input type="text" placeholder="输入用户名" id="name"></div>
  3. <div>密 码:<input type="password" placeholder="输入密码" id="pwd"></div>
  4. <button id="login" type="submit">登录</button>
  5. </form>

css

  1. body {
  2. background-color: yellowgreen;
  3. }
  4. form {
  5. display: flex;
  6. flex-direction: column;
  7. justify-content: space-around;
  8. align-items: center;
  9. width: 300px;
  10. height: 200px;
  11. border: 1px solid gray;
  12. margin: 200px auto;
  13. border-radius: 5px;
  14. background-color: #fff;
  15. box-shadow: 15px 15px 15px gainsboro;
  16. }
  17. input {
  18. width: 200px;
  19. height: 30px;
  20. border: none;
  21. border-bottom: 1px solid black;
  22. }
  23. input:focus{
  24. outline: none;
  25. }
  26. button {
  27. width: 60px;
  28. height: 30px;
  29. background-color: skyblue;
  30. cursor: pointer;
  31. border: none;
  32. border-radius: 5px;
  33. margin-left: 40px;
  34. }

效果图

获取表单值

首先需要先引入axios

获取表单中的值

  1. //获取用户名的value值
  2. const text = document.querySelector('#name').value
  3. //获取密码框的value值
  4. const pwd = document.querySelector('#pwd').value

给登录按钮绑定点击事件,并在点击登录时打印用户输入的值

  1. document.querySelector('#login').addEventListener('click', function(e) {
  2. e.preventDefault()
  3. console.log(text);
  4. console.log(pwd);
  5. })

注意,当提交时,需要阻止默认事件发生,否则会自动刷新页面

 e.preventDefault()

但当我们点击登录按钮时发现,获取到的是空值

当我们在函数内定义获取到的表单中的值时,然后再打印

  1. document.querySelector('#login').addEventListener('click', async function(e) {
  2. e.preventDefault()
  3. const text = document.querySelector('#name').value
  4. const pwd = document.querySelector('#pwd').value
  5. console.log(text);
  6. console.log(pwd);
  7. })

成功获取到了值

原因是如果在函数外定义,那么在页面加载时会运行一次改代码,而此时的表单内是没有任何值的,所以当点击登录时获取到的是空值

使用axios发送post登录请求

打印从服务器发过来的信息

  1. const res = await axios({
  2. url:'http://127.0.0.1:3000/post',
  3. method:'post',
  4. data:({
  5. username:text,
  6. password:pwd
  7. })
  8. })
  9. console.log(res);

当我们输入正确的账号密码时发现(账号:admin 密码:000000  在服务器中写死的账号密码)

返回来的却是登录失败,所以我们查看一下后端服务器接受到的是什么数据,并向客户端发送

我们发现服务器接受到的是空值

原因是发送过去的数据格式问题,这里需要引入qs.stringfy(data),将传过去的对象格式化为字符串

直接在终端安装qs

npm install qs

然后引用

  1. const res = await axios({
  2. url:'http://127.0.0.1:3000/post',
  3. method:'post',
  4. data:Qs.stringify({
  5. username:text,
  6. password:pwd
  7. })
  8. })
  9. console.log(res);

引入qs库以后,服务器可以成功获取到客户端的数据

根据服务器返回的status状态码使用window.location.href='跳转页面路径'来进行页面的跳转

  1. if(res.data.status == 200){
  2. alert('登录成功')
  3. window.location.href='退出.html'
  4. }else {
  5. alert('登录失败')
  6. }

完整代码

  1. document.querySelector('#login').addEventListener('click', async function(e) {
  2. e.preventDefault()
  3. const text = document.querySelector('#name').value
  4. const pwd = document.querySelector('#pwd').value
  5. const res = await axios({
  6. url:'http://127.0.0.1:3000/post',
  7. method:'post',
  8. data:Qs.stringify({
  9. username:text,
  10. password:pwd
  11. })
  12. })
  13. if(res.data.status == 200){
  14. alert('登录成功')
  15. window.location.href='退出.html'
  16. }else {
  17. alert('登录失败')
  18. }
  19. })

这样就完成登录的post请求

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/405481
推荐阅读
相关标签
  

闽ICP备14008679号