如何用Ajax技术实现验证码？

互联网/前端

80次点击 · 1251天前 · 陈师傅

1条回答我要回复

平常心1251天前

样式表里的讲解
类选择器 ok 为绿色字体表示验证成功的颜色类选择器 err 为红色字体表示验证失败的颜色元素选择器 img 表示设置了一个小手图标还有一个相对定位距顶部5像素页面元素中的讲解图片是用PHP 文件随机生成的图片! 输入框用Ajax请求命令给服务器来进行验证是否成功并由PHP 返回给客户端验证是否成功
<style>
.ok{color:green}
.err{color:red}
img{cursor:pointer;
position: relative;
top: 5px;
}
</style>
<body>
验证码：<input type="text" id="textCode">
<img src="img.php" alt="" id="imgCode" title="看不清,点击换一张">
<span id="msgCode"></span>
</body>JS 讲解
外部嵌入 ajax.js 文件进行自定义 ajax 函数利用 ajax 发送 get 请求到 Verification_code.php 服务器并把 input#textCode 的值发送给 php服务器以文本的形式发送然后接收回调函数接收 PHP服务器响应回来的数据来进行页面判断来添加样式当点击img#imgCode 图片时自动向服务器地址发送一个请求并重新刷新图片
<script src="ajax.js"></script>
<script>
textCode.Onkeyup=function(){
if(textCode.value!=""){
ajax(
"get",
"Verification_code.php?code="+
textCode.value,
"",
"text"
).then(
data=>{
if(data == "true"){
msgCode.innerHTML="验证码正确";
msgCode.className="ok";
}else{
msgCode.innerHTML="验证码错误";
msgCode.className="err";
}
}
);
}else{
msgCode.innerHTML="";
}
}
imgCode.Onclick=function(){
this.src="img.php";
}
</script>