Jquery中的Ajax在页面无刷新情况下实现验证码的验证
①准备好的html文件,代码如下
<!DOCTYPE html>
<html>
<head>
<title>jquery中的ajax</title>
</head>
<body>
<input type="text" name="code" id="code" />
<button id="checkcode" name="checkcode">验证</button>
<!-- 引入jqurey -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//当验证按钮点击的时候 执行一下代码
$("#checkcode").click(function(){
//获取表单中输入验证码的值
var code=$("#code").val();
//ajax开始提交数据给后台
$.ajax({
//请求的后台php文件
url:"checkcode.php",
//请求类型为post 也可以是get
type:"POST",
//准备传给后台的数据
data:{"code":code},
//请求成功后的回调函数
success:function(data,textStatus,jqXHR){
//通过控制台查看验证结果
console.log(jqXHR.responseText);
}
});
});
});
</script>
</body>
</html>
通过以上代码,放在浏览器中可以看到如下图( 切记,该文件和php文件要放在服务器中运行,毕竟php是服务器语言)
②准备好的checkcode.php文件,代码如下
<?php
//这里本来是要弄验证码的,但是为了验证方便,索性就把它写死了
$vcode=4567;
//从前台传过来的验证码
$code=$_POST['code'];
//判断如果前台传过来的值 跟这里的值一直,就说明成功了,否则失败。
if($vcode==$code)
echo "验证成功";
else
echo "验证失败";
现在我们开始测试了,通过控制台可以看到,在无刷新的情况下,我故意验证失败了,因为我没输入4567
现在我重新输入正确的验证码,看下结果,验证成功了!
是不是觉得很简单,其实我也觉得,嘿嘿!打字打的手累,觉得还可以的点下赞,谢谢啦~