您的位置：首页 > Web前端 > JQuery

Jquery中的AJax技术结合PHP实现无刷新验证验证码

2017-08-03 14:35 691 查看

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



现在我重新输入正确的验证码,看下结果，验证成功了！



是不是觉得很简单，其实我也觉得，嘿嘿！打字打的手累，觉得还可以的点下赞，谢谢啦~
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航