Ajax显示实现用户名验证

最新推荐文章于 2021-03-06 20:42:58 发布

长发程序猿

最新推荐文章于 2021-03-06 20:42:58 发布

阅读量967

点赞数 2

本文链接：https://blog.csdn.net/weixin_44341812/article/details/101292544

版权

什么是Ajax

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

功能实现

.html文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>用户名：<input type="text" name="name" value=""><span id="ff"></span></p>
	<p><input type="submit" name="" value="提交"></p>
</body>
</html>
<script type="text/javascript">
	var inp= document.getElementsByTagName('input')[0];
	inp.onblur=function() {
		var xhr=new XMLHttpRequest();
		xhr.open('get','2.php?name='+inp.value,true);
		xhr.send(null);
		var sp = document.getElementById('ff');
		//监听状态
		xhr.onreadystatechange=function(){
			if(this.readyState===4){
				if(this.responseText == 1){
                     sp.innerHTML='名字重复';
				}else{
					sp.innerHTML='通过';
				}
			}
		}
	}
</script>

.*php

<?php
$name=$_GET['name'];
$arr = array('lisi','zhaoliu','zhaosi','liuneng');
echo in_array($name,$arr)?1:0;

效果图如下

在这里插入图片描述

下一篇文件上传进度条

长发程序猿

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫