前端验证码实现

最新推荐文章于 2024-07-28 08:43:29 发布

qq_45225833

最新推荐文章于 2024-07-28 08:43:29 发布

阅读量1.2k

点赞数

分类专栏：笔记验证码文章标签： php javascript

本文链接：https://blog.csdn.net/qq_45225833/article/details/115131742

版权

笔记同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

验证码

1 篇文章 0 订阅

订阅专栏

功能：php后端生成随机验证码，并生成验证码图片，前端img的src属性指向该文件获取图片
1.php后端随机生成一个字符串并设置该php文件，使用echo输出字符串，利用GD库生成验证码图片并以图片文件的形式保存在服务器中；
2.前端通过axios库的$.get请求得到1中生成的验证码，img的src设置为1中的图片的URL即可；
3.验证码的刷新：每次点击验证码，src后面加上一个随机的参数即可

$.get("http://phpstudy:8000/%E8%AE%BA%E5%9D%9B%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86/%E9%AA%8C%E8%AF%81%E7%A0%81/code.php?" + Math.random(), function(
							data, status) {
							app.code = data;
							console.log(app.code);
						})
						setTimeout(function() {
							app.codeUrl = "http://phpstudy:8000/%E8%AE%BA%E5%9D%9B%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86/%E9%AA%8C%E8%AF%81%E7%A0%81/code.png?" + Math.random();
							// $("#code").Attr("src","http://phpstudy:8000/%E8%AE%BA%E5%9D%9B%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86/%E9%AA%8C%E8%AF%81%E7%A0%81/code.php");
						}, 100)