ajax实现注册用户名时动态显示用户名是否已经被注册(1、ajax可以实现我们常见的注册用户名动态判断)(2、jquery里面的ajax也是类似我们这样封装了的函数)
一、总结
1、ajax可以实现我们常见的注册用户名动态判断
2、jquery里面的ajax也是类似我们这样封装了的函数
二、ajax实现注册用户名时动态显示用户名是否已经被注册
练习:判断用户名是否存在
- 实例描述:
判断用户名是否存在,并进行相应的提示。
- 案例要点:
JSON数据的加载和解析;
将用户的注册名和加载的JSON文件进行比较,判断用户名是否已经存在。
三、代码
html代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>课堂演示</title>
<script type="text/javascript" src="ajax1.js"></script>
<style type="text/css">
#sp{
color: orange;
}
</style>
</head>
<body>
<form action="#" id="form1" method="get">
<p>用户名:<input type="text" id="username" name="username"><span id="sp"></span></p>
<p>密  码:<input type="password" id="password" name="password"></p>
<input type="button" value="提交" onclick="checkName()">
</form>
<script>
function checkName(){
var username=document.getElementById('username').value;
var sp=document.getElementById('sp')
var boo=false;
ajax('names.json',function(str){
// alert(typeof str)
var nameArr=JSON.parse(str)
// alert(typeof nameArr)
for(var i=0;i<nameArr.length;i++){
if (nameArr[i]==username) {
// alert('用户名已经存在')
boo=true;
}//else{
//alert('用户名可以使用')
//}
}
if (boo) {
sp.innerHTML='您来晚了,这个用户名已经存在,请再换一个'
// alert('用户名已经存在')
}else{
// alert('用户名可以使用')
sp.innerHTML='恭喜您,这个用户名可以使用'
}
})
}
</script>
</body>
</html>
js的ajax函数封装:ajax1.js
function ajax(url,funSucc,fnFaild){ var xhr=new XMLHttpRequest(); url=url+'?'+new Date().getTime(); xhr.open('GET',url,true); xhr.send(); xhr.onreadystatechange=function(){ if (xhr.readyState==4) { if (xhr.status==200) { funSucc(xhr.responseText) }else{
if (fnFaild){
fnFaild(xhr.statusText)
} }
}
} }
数据:names.json
["张三","李四","王五"]