首页> 基础笔记 >JS/JQ基础学习 >Ajax Ajax
JavaScript-AJAX实例：表单验证
作者：小萝卜 2023-03-23 【 Ajax javascript 】 浏览 236
简介JavaScript-AJAX实例：表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>AJAX实例</title>
</head>
<body>
<!-- html注释 -->
<h2>AJAX实例：表单验证</h2>
账号：<input type="text" name="uname" onblur="doCheck(this)"/><span></span><br/><br/>
密码：<input type="password" name="upass"/><span></span><br/><br/>
<script type="text/javascript">
function doCheck(ob){
//1.创建xmlHttpRequest请求对象
var xmlhttp;
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.初始化请求
xmlhttp.open("get","6.php?name="+ob.value,true); //异步
//3.设置回调函数
xmlhttp.onreadystatechange=function(){
//判断是否已经请求结束
if(xmlhttp.readyState==4){
//浏览器响应状态
if(xmlhttp.status==200){
//获取响应结果
var info = xmlhttp.responseText;
//判断
if(info=="true"){
ob.nextSibling.innerHTML="当前用户已存在！";
ob.nextSibling.style.color="red";
}else{
ob.nextSibling.innerHTML="当前用户可用！";
ob.nextSibling.style.color="green";
}
}else{
alert("请求失败！");
}
}
}
//4.执行发送
xmlhttp.send();
}
</script>
</body>
</html>
<?php
//执行Ajax验证
$users=array("zhangsan","lisi","admin","root","zhaoliu");
//验证用户是否存在
if(in_array($_GET['name'],$users)){
echo "true";
}else{
echo "false";
}
很赞哦！ (0)
