ajax异步实现表单的无刷新验证

最新推荐文章于 2017-05-25 20:55:00 发布

zyz0728

最新推荐文章于 2017-05-25 20:55:00 发布

阅读量4.2k

点赞数

分类专栏： php JavaScript ajax 文章标签： php ajax 异步表单验证码

本文链接：https://blog.youkuaiyun.com/zyz0728/article/details/49159199

版权

JavaScript 同时被 3 个专栏收录

10 篇文章

订阅专栏

php

6 篇文章

订阅专栏

ajax

2 篇文章

订阅专栏

本文介绍了如何利用Ajax实现表单的无刷新验证，重点在于理解同步与异步的区别，并通过一个实例展示了如何在PHP环境中设置验证。通过checkcap.php进行后台数据验证，testcap.php用于布局展示，checkcap.js负责发送Ajax请求和处理响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实现ajax异步实现表单的无刷新验证之前我们先要了解什么是异步什么是同步

"同步模式"就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；"异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

"异步模式"非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，"异步模式"甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。

这里的表单验证使用的是上文所实现的验证码，通过无刷新ajax技术实现验证

首先我们要准备写三个文件一个是checkcap.php(用来验证ajax发送过来的数据并传出返回值)，还有要写一个testcap.php(实现布局)，最后要完成checkcap.js的编写

1.testcap.php

<span style="font-size:10px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/checkcap.js"></script>
<title>验证码</title>
</head>
<body>


<form method="post" action="testdemo.php">
<ul>
<li>
<a href="javascript:void(0)"οnclick="document.getElementById('cap').src='testdemo.php?r=+Math.random()'">
<img border="1"  id="cap" src="testdemo.php?r=<?php echo rand();?>" width="100" height="30"  />
</a>
</li>
<li>
<input type="text" id="confirm" οnblur="checkcap(this.value)" />
<div id="warning"></div>
</li>
</ul>
</form>
<style>
#warning{
	position:relative;
      width:100px;
	height:20px;
	border:#000 1px solid;	
	}
</style>
</body>
</html></span>

实现首页布局

2.checkcap.js

// JavaScript Document
var xmlhttp;
function checkcap(cap){
	if(cap.length==0){
		document.getElementById("warning").innerHTML="";
		}
	xmlhttp=CreateXmlHttp();
	if(xmlhttp==null){
		alert("创建xmlhttprequest对象失败");
		}
	var url="checkcap.php"
	var url=url+"?q="+cap;
	var url=url+"&id="+Math.random();
	 xmlhttp.onreadystatechange=statechanged;
	 xmlhttp.open("GET",url,true);
     xmlhttp.send(null);	
	}
//创建URL，以及用open方法获取checkcap.php来实现异步传输。
function statechanged(){
	if(xmlhttp.readyState==4&&xmlhttp.status==200){
		document.getElementById("warning").innerHTML=xmlhttp.responseText;
		}
	}
//获取xmlhttprequest的状态，并将返回的内容输出	
function CreateXmlHttp(){
	var xmlhttp=null;
	try{
		xmlhttp=new XMLHttpRequest();
		}
		catch(e){
			try{
		xmlhttp=new ActiveXObject(Msxml2.XMLHTTP);		
				}
		catch(e){
		xmlhttp=new ActiveXObject(Microsoft.XMLHTTP);
			
			}
		}
		return xmlhttp;
	
	}
//初始化xmlhttprequest()

3.checkcap.php

<span style="font-size:10px;"><?php session_start();?>
</span>

<span style="font-size:10px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<?php 
$cap=$_GET['q'];
$cap1=$_SESSION['authcode'];
if($cap1==$cap){
$response="成功";
}
else{
$response="失败";
	}
echo $response;
?>
</body>
</html></span>

通过以上代码基本实现了ajax无刷新验证，通过此方法在判断是否正确后会输出字符来区分。