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

目录

前言

搭建服务器

搭建前端登录页面

获取表单值

使用axios发送post登录请求


前言

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

搭建服务器

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

// 导入express模块
const express = require('express')
// 创建express服务器实例
const app = express()// 导入jwt相关的包
const jwt = require('jsonwebtoken')
const expressJWT = require('express-jwt')// 允许资源跨域共享
const cors = require('cors')
app.use(cors())// 解析post提交的表单数据
app.use(express.urlencoded({extended:false}))// 定义secret密钥
const secretKey= 'notbald'// 登录接口
app.post('/post',(req,res)=> {const userinfo = req.bodyif(userinfo.username !=='admin'||userinfo.password!=='000000'){return res.send({status:400,msg:'登录失败',hh:userinfo})}const tokenStr = jwt.sign({username:userinfo.username},secretKey,{expiresIn:'60s'})res.send({status:200,msg:'登录成功',token:tokenStr})
})// 将JWT字符串还原为JSON对象
app.use(expressJWT.expressjwt({secret:secretKey,algorithms:["HS256"]
}))// get请求
app.get('/get',(req,res)=>{res.send({status:200,message:'获取用户信息成功',data:{username:req.auth.username}})
})// 使用全局错误处理中间件,捕获解析 JWT 失败后产生的错误
app.use((err, req, res, next) => {// 这次错误是由 token 解析失败导致的if (err.name === 'UnauthorizedError') {return res.send({status: 401,message: '无效的token',})}res.send({status: 500,message: '未知的错误',})})// 启动服务器
app.listen(3000,()=> {console.log('server running the localhost http://127.0.0.1:3000')
})

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

搭建前端登录页面

html

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

css

 body {background-color: yellowgreen;}form {display: flex;flex-direction: column;justify-content: space-around;align-items: center;width: 300px;height: 200px;border: 1px solid gray;margin: 200px auto;border-radius: 5px;background-color: #fff;box-shadow: 15px 15px 15px gainsboro;}input {width: 200px;height: 30px;border: none;border-bottom: 1px solid black;}input:focus{outline: none;}button {width: 60px;height: 30px;background-color: skyblue;cursor: pointer;border: none;border-radius: 5px;margin-left: 40px;}

效果图

获取表单值

首先需要先引入axios

获取表单中的值

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

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

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

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

 e.preventDefault()

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

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

 document.querySelector('#login').addEventListener('click', async function(e) {e.preventDefault()const  text = document.querySelector('#name').valueconst pwd = document.querySelector('#pwd').valueconsole.log(text);console.log(pwd);})

成功获取到了值

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

使用axios发送post登录请求

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

const res = await axios({url:'http://127.0.0.1:3000/post',method:'post',data:({username:text,password:pwd})})console.log(res);

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

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

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

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

直接在终端安装qs

npm install qs

然后引用

const res = await axios({url:'http://127.0.0.1:3000/post',method:'post',data:Qs.stringify({username:text,password:pwd})})console.log(res);

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

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

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

完整代码

 document.querySelector('#login').addEventListener('click', async function(e) {e.preventDefault()const  text = document.querySelector('#name').valueconst pwd = document.querySelector('#pwd').valueconst res = await axios({url:'http://127.0.0.1:3000/post',method:'post',data:Qs.stringify({username:text,password:pwd})})if(res.data.status == 200){alert('登录成功')window.location.href='退出.html'}else {alert('登录失败')}})

这样就完成登录的post请求

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/164420.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

性能测试jmeter命令行运行+html测试报告解读

windows下打开jmeter的运行窗口&#xff0c;可以看到提示不要用GUI模式进行负载测试&#xff0c;如果要用负载测试&#xff0c;用cli模式&#xff0c;因为GUI模式运行jmeter比较消耗性能。 命令行模式 windows下找到jemeter所在文件夹&#xff0c;打开cmd输入命令。 jmeter -n…

Leetcode 第 365 场周赛题解

Leetcode 第 365 场周赛题解 Leetcode 第 365 场周赛题解题目1&#xff1a;2873. 有序三元组中的最大值 I思路代码复杂度分析 题目2&#xff1a;2874. 有序三元组中的最大值 II思路代码复杂度分析思路2 题目3&#xff1a;2875. 无限数组的最短子数组思路代码复杂度分析 题目4&a…

基于JAVA+SpringBoot+UniApp+Vue的前后端分离的手机移动端图书借阅平台

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着社会信息化的快速…

IPETRONIK数采与第三方软件集成

一 第三方软件 IPETRONIK公司提供IPEmotion用于车辆测试&#xff0c;但在某些特殊领域也有一些专业的软件&#xff0c;例如标定&#xff0c;则需要IPETRONIK数采来进行压力、温度、转速等信号的采集。 IPETRONIK提供了INCA和CANape插件&#xff0c;且这两款软件均可直接识别到…

微信小程序修改van-popup的背景颜色

效果图&#xff1a; van-popup背景颜色渐变 使用深度修改样式不生效&#xff0c;直接在 custom-style里面修改即可&#xff1b; <van-popup position"bottom"custom-style"height:25%;background:linear-gradient(95deg, #F8FCFF -0.03%, #EDF5FF 64.44…

【Qt之布局】QVBoxLayout、QHBoxLayout、QGridLayout、QFormLayout介绍及使用

在Qt中&#xff0c;布局管理器&#xff08;Layout&#xff09;用于管理窗口中的控件的位置和大小&#xff0c;以适应不同大小的窗口。 常用的布局管理器包括QVBoxLayout、QHBoxLayout、QGridLayout和QFormLayout。 先放张布局UI&#xff1a; 1. QVBoxLayout&#xff08;垂直布…

Linux性能优化--性能工具:磁盘I/O

6.0 概述 本章介绍的性能工具能帮助你评估磁盘I/O子系统的使用情况。这些工具可以展示哪些磁盘或分区已被使用&#xff0c;每个磁盘处理了多少I/O,发给这些磁盘的I/O请求要等多久才被处理。 阅读本章后&#xff0c;你将能够&#xff1a; 确定系统内磁盘I/O的总量和类型(读/写…

使用 ClickHouse 深入了解 Apache Parquet (一)

​ 【squids.cn】 全网zui低价RDS&#xff0c;免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等 自2013年作为Hadoop的列存储发布以来&#xff0c;Parquet几乎已经成为一种无处不在的文件交换格式&#xff0c;它提供了高效的存储和检索。这种采纳使其成为更近期的…

为网站配置SSL

HTTPS &#xff08;全称&#xff1a;Hyper Text Transfer Protocol over SecureSocket Layer&#xff09;&#xff0c;是以安全为目标的 HTTP 通道&#xff0c;在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。HTTPS 在HTTP 的基础下加入SSL 层&#xff0c;HTTPS…

AWS S3加密

Hello大家好&#xff61; 在本课时我们将讨论S3加密相关的内容。 S3加密相关是认证考试的一个重要的主题考点&#xff0c;您需要了解亚马逊S3的几种不同类型的加密方式。| 首先是静态数据的加密&#xff0c;静态数据加密是指数据存储在亚马逊S3 数据中心的磁盘上时&#xff0…

Maven的详细介绍(maven的全据配置以及idea中maven的配置)

maven的理解 Maven 是一个强大的项目管理和构建自动化工具&#xff0c;它通过抽象的项目对象模型(POM&#xff1a;Project Object Model)和构建生命周期模型(Project Lifecycle)来对项目及其构建过程进行管理(Dependency Management System)&#xff0c;Maven 最大化的消除了构…

爬虫/scrapy基础

如果文章对你有帮助&#xff0c;欢迎关注、点赞、收藏一键三连支持以下哦&#xff01; 想要一起交流学习的小伙伴可以加zkaq222&#xff08;备注CSDN&#xff0c;不备注通不过哦&#xff09;进入学习&#xff0c;共同学习进步 目录 0x01 安装和简介 0x02 文件作用 0x04 保存…

阿里巴巴店铺所有商品数据接口及店铺商品数据分析

获取阿里巴巴店铺所有商品数据的接口是阿里巴巴开放平台提供的接口&#xff0c;通过该接口可以获取店铺所有商品数据。 通过阿里巴巴开放平台接口获取店铺所有商品数据的方法如下&#xff1a; 在开放平台注册成为开发者并创建一个应用&#xff0c;获取到所需的 App Key 和 Ap…

C语言实现用递归方法求 () = ∑ (^2)

完整代码&#xff1a; // 用递归方法求 ??(??) ∑ (??^2) #include<stdio.h>int func(int n){if (n1){return 1;}else{return n*nfunc(n-1);} }int main() {int n;printf("请输入一个整数");scanf("%d",&n);printf("%d",func(…

微信好友消息自动回复,让你轻松应对好友咨询

有许多用微信做业务、做微商的小伙伴&#xff0c;微信有时候消息太多看不过来&#xff0c;漏看消息&#xff0c;或者不知道怎么引导用户&#xff0c;让他们看到你想让他们看到的消息。微信上用户多微信上的信息容易漏掉&#xff0c;怎么能有时效的回复客户呢&#xff1f;此时你…

学习pytorch14 损失函数与反向传播

神经网络-损失函数与反向传播 官网损失函数L1Loss MAE 平均MSELoss 平方差CROSSENTROPYLOSS 交叉熵损失注意code 反向传播在debug中的显示code B站小土堆pytorch视频学习 官网 https://pytorch.org/docs/stable/nn.html#loss-functions 损失函数 L1Loss MAE 平均 import to…

食品软水树脂和工业软水树脂有什么区别?高盐水除钙镁应选择什么树脂?

在食品、饮料、制药、汽车制造、化工、电子、制革、钢铁、纺织等许多行业中&#xff0c;水的质量对产品的质量有非常重要的影响。 软化水可以有效改善水质&#xff0c;减少水中钙、镁离子含量&#xff0c;避免水垢形成&#xff0c;从而减少加热和冷却设备的能源消耗&#xff0c…

元梦之星内测上线,如何在B站打响声量?

元梦之星是腾讯天美工作室群研发的超开星乐园派对手游&#xff0c;于2023年1月17日通过审批。该游戏风格可爱软萌&#xff0c;带有社交属性&#xff0c;又是一款开黑聚会的手游&#xff0c;备受年轻人关注。 飞瓜数据&#xff08;B站版&#xff09;显示&#xff0c;元梦之星在…

Python制作PDF转Word工具(Tkinter+pdf2docx)

一、效果样式 二、核心点 1. 使用pdf2docx完成PDF转换Word 安装pdf2docx可能会报错&#xff0c;安装完成引入from pdf2docx import Converter运行也可能报错&#xff0c;可以根据报错提示看缺少那些库&#xff0c;先卸载pip uninstall xxx,使用pip install python-docx -i htt…

Smartbi携手某证券公司成功打造数据文化体系

以数据为抓手搭建数据体系&#xff0c;需要从业务运营的角度出发&#xff0c;借助工具方法&#xff0c;结构化、系统性地解决业务运营场景中的各种问题&#xff0c;不断优化和提升业务运营效率。数据体系、运营体系、工具方法和组织文化四位一体&#xff0c;自成体系&#xff0…