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 也可以是gettype:"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 "验证成功";elseecho "验证失败";
现在我们开始测试了,通过控制台可以看到,在无刷新的情况下，我故意验证失败了，因为我没输入4567
现在我重新输入正确的验证码,看下结果，验证成功了！
是不是觉得很简单，其实我也觉得，嘿嘿！打字打的手累，觉得还可以的点下赞，谢谢啦~
