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

最新推荐文章于 2024-07-18 10:00:11 发布

咣咚一下

最新推荐文章于 2024-07-18 10:00:11 发布

阅读量850

点赞数

文章标签： ajax jquery php

本文链接：https://blog.csdn.net/qq_35447843/article/details/76619086

版权

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

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

是不是觉得很简单，其实我也觉得，嘿嘿！打字打的手累，觉得还可以的点下赞，谢谢啦~

咣咚一下

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery中的AJax技术结合PHP实现无刷新验证验证码

Jquery中ajax无刷新验证验证码
复制链接

扫一扫

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

Jquery中的Ajax在页面无刷新情况下实现验证码的验证

“相关推荐”对你有帮助么？