在前端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.mzph.cn/news/110920.shtml

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

相关文章

SpringCloud学习笔记-gateway网关自定义全局过滤器

需求&#xff1a;定义全局过滤器&#xff0c;拦截请求&#xff0c;判断请求的参数是否满足下面条件&#xff1a; 参数中是否有authorization&#xff0c; authorization参数值是否为admin 如果同时满足则放行&#xff0c;否则拦截 实现&#xff1a; 在gateway中定义一个过…

《SQLi-Labs》04. Less 23~28a

title: 《SQLi-Labs》04. Less 23~28a date: 2023-10-19 19:37:40 updated: 2023-10-19 19:38:40 categories: WriteUp&#xff1a;Security-Lab excerpt: 联合注入&#xff0c;注释符过滤绕过之构造闭合&#xff0c;%00 截断、二次注入、报错注入&#xff0c;空格过滤绕过&…

【Java基础面试二十四】、String类有哪些方法?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;String类有哪些方法&…

诊断DLL——Visual Studio安装与dll使用

文章目录 Visual Studio安装一、DLL简介二、使用步骤1.新建VS DLL工程2.生成dll文件3.自定义函数然后新建一个function.h文件,声明这个函数。4.新建VS C++ console工程,动态引用DLL编写代码,调用dll三、extern "C" __declspec(dllexport)总结Visual Studio安装 官…

欧科云链研究院:人类或将成为仅次于AI第二聪明物种?Web3不允许

出品&#xff5c;欧科云链研究院 在 AI行业“掘金买铲”的英伟达&#xff0c;60%的红杉投资在AI相关领域&#xff0c;之前只专注Web3的顶级VC&#xff0c;Paradigm 正在从转向人工智能等 "前沿 "技术。 资本的追逐让AI迷人且危险。 OKG RESEARCH IN FT AI教父Geoffre…

并发容器(Map、List、Set)实战及其原理

一. JUC包下的并发容器 Java的集合容器框架中&#xff0c;主要有四大类别&#xff1a;List、Set、Queue、Map&#xff0c;大家熟知的这些集合类ArrayList、LinkedList、HashMap这些容器都是非线程安全的。 所以&#xff0c;Java先提供了同步容器供用户使用。 同步容器可以简单地…

生成“我的精彩回答”页面源码(Python)

生成“我的精彩回答”页面源码(Python)

单点登录知识点

单点登录&#xff08;Single Sign-On&#xff0c;SSO&#xff09;是一种身份验证技术&#xff0c;用户只需进行一次认证&#xff0c;便可访问多个与该系统相关的应用程序。单点登录的实现方式有很多种&#xff0c;如以下几种&#xff1a; 1. 基于代理服务器的实现&#xff1a;…

Xilinx IP 10 Gigabit Ethernet Subsystem IP

Xilinx IP 10 Gigabit Ethernet Subsystem IP 10 Gb 以太网子系统在 10GBASE-R/KR 模式下提供 10 Gb 以太网 MAC 和 PCS/PMA,以提供 10 Gb 以太网端口。发送和接收数据接口使用 AXI4 流接口。可选的 AXI4-Lite 接口用于内部寄存器的控制接口。 • 设计符合 10 Gb 以太网规范…

深入了解RPA业务流程自动化的关键要素

在RPA业务流程自动化实施过程中&#xff0c;哪些因素起着至关重要的作用&#xff1f;这其实没有一个通用的答案&#xff0c;每一个RPA业务流程自动化的部署&#xff0c;都需要结合具体场景去调整&#xff0c;并且进行全面的规划。 首当其冲是要关注以下几点&#xff1a; 1、专…

AutoGPT:自动化GPT原理及应用实践

一、AutoGPT介绍 想象一下&#xff0c;生活在这样一个世界里&#xff0c;你有一个人工智能助手&#xff0c;它不仅能够理解你的需求&#xff0c;而且还能够与你一起学习与成长。人工智能已无缝融入我们工作、生活&#xff0c;并帮助我们有效完成各种目标。大模型技术的发展与应…

Unity之ShaderGraph如何模拟水波实现顶点波动

前言 今天我们实现类似水波纹的顶点波动效果 如下所示&#xff1a; 主要节点 Tilling And Offset&#xff1a;分别通过输入Tiling和Offset平铺和偏移输入UV的值。这通常用于细节贴图和随时间滚动的纹理。 Gradient Noise&#xff1a;根据输入UV生成梯度或Perlin噪声。生成…

【扩散模型】如何用最几毛钱生成壁纸

通过学习扩散模型了解到了统计学的美好&#xff0c;然后顺便记录下我之前文生图的基础流程~ 扩散模型简介 这次是在DataWhale的组队学习里学习的&#xff0c;HuggingFace开放扩散模型学习地址 扩散模型训练时通过对原图增加高斯噪声&#xff0c;在推理时通过降噪来得到原图&…

【UE4 材质编辑篇】1.0 shader编译逻辑

UE4新手&#xff0c;学起来&#xff08;&#xff09;文章仅记录自己的思考。 参考&#xff1a;虚幻4渲染编程(材质编辑器篇)【第一卷&#xff1a;开篇基础】 - 知乎 (zhihu.com) 开篇基础就摸不着头脑&#xff0c;原因是此前完全没有摸过UE4&#xff0c;一点一点记录吧&#x…

【解决方案】msys2 ucrt64 链接poco库时出现错误 undefined reference to `wWinMain‘

使用pacman安装了poco: ucrt64/mingw-w64-ucrt-x86_64-poco 1.11.6-2 CMakeLists.txt如下&#xff1a; find_package(Poco REQUIRED Foundation Util Net) set(ThirdLibs "Poco::Foundation;Poco::Util;Poco::Net") # ${ThirdLibs} add_executable(test ${PROJECT…

25台兰博基尼跑车赛道巡游!泡泡玛特MOLLY攒的局就是这么拉风

入秋以来气温逐渐转冷&#xff0c;但泡泡玛特的市场活动却持续升温&#xff1a;国内首个潮玩行业沉浸式IP主题乐园泡泡玛特城市乐园正式开园&#xff1b;2023PTS上海国际潮流玩具展&#xff1b;入驻美国第二大商场、布里斯班再拓新店等海外布局步伐不停……将广大消费者的身心带…

解决电脑出现msvcp140.dll丢失问题,msvcp140.dll丢失的详细解决方法

在我们日常使用电脑的过程中&#xff0c;可能会遇到各种问题&#xff0c;其中之一就是MSVCCP140.DLL文件缺失。这个文件是Microsoft Visual C 2015 Redistributable的一部分&#xff0c;通常用于支持一些软件或游戏运行。如果这个文件丢失或损坏&#xff0c;可能会导致程序无法…

Spark常用算子

转换算子 value类型 算子名称作用Map映射a->bflatMap扁平化[[a,b],[c,d]] -> [a,b,c,d] &#xff0c;二维变一维groupBy分组[1,2,3,4] ->[[1,3],[2,4] ]&#xff0c;一维变二维filter过滤[1,2,3,4] -> [2,4] 符合条件进入&#xff0c;不符合去掉distinct去重[1,1…

使用kubekey部署k8s集群和kubesphere、在已有k8s集群上部署kubesphere

目录 前言什么是kubekey&#xff08;简称kk&#xff09;单节点上安装 kubesphere&#xff08;all in one 快速熟悉kubesphere&#xff09;部署 kubernetes和和kubesphere 多节点安装部署 kubernetes和和kubesphere 离线安装k8s v1.22.17和kubesphere v3.3.2联网-在已有k8s集群上…

SpringBoot集成Lettuce客户端操作Redis

目录 一、前言二、基础集成配置&#xff08;redis单节点&#xff09;2.1、POM2.2、添加配置文件application.yml2.3、编写配置文件2.4、编写启动类2.5、编写测试类测试是否连接成功 一、前言 spring-boot-starter-data-redis有两种实现 lettuce 和 jedis&#xff0c;spring bo…