<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.ok {color: green;}
.bad {color: red;}
</style>
</head>
<body>
<form action="" method="">
<ul>
<li>
<label for="">用户名：</label>
<input type="text" name='uesrname' id='user'>
<span id="msg"></span>
</li>
<li>
<label for="">密码：</label>
<input type="password" name='pwd'>
</li>
<li>
<label for=""> </label>
<input type="submit" value="注册">
</li>
</ul>
</form>
<script>
//获取输入框
var user = document.getElementById('user');
//在填写用户名完毕，失去焦点时，发出ajax请求
user.onblur = function(){
//第一步，创建xhr对象
var xhr = new XMLHttpRequest();
//第二步，打开连接
//需要告知我，什么方式，连接谁
// var url = "reg_get.php?username="+user.value;
var url = "reg_json.php?username="+encodeURIComponent(user.value);
xhr.open('get',url);
//第三步,监听状态变化，在返回响应结果的时候，处理返回结果
xhr.onreadystatechange = function(){
//需要判断，确保发送请求成功请求返回成功
if (xhr.readyState == 4 && xhr.status == 200) {
//接受返回值
//使用JSON对象的静态方法parse
var json_array = JSON.parse(xhr.responseText);
// 遍历JSON返回值
function printAll(obj){
for(var k in obj){
var v=obj[k];
if(typeof(v)!="object"){
document.writeln(k+"是"+v+"<br/>");
}else{
printAll(v);
}
}
}
printAll(json_array);
/*将返回结果写到span标签中
var tips = document.getElementById('msg')
tips.innerHTML = json_array.msg;
if (json_array.code == 1) {
tips.className = "ok";
} else {
tips.className = "bad";
}*/
}
}
//第四步，发送请求
xhr.send(null);
}
</script>
</body>
</html>
reg_json.php的代码：
<?php
$username = $_GET['username'];
$users = array('root','admin','test');
if (in_array($username,$users)) {
$msg = "对不起，该用户名已被占用";
$code = 0;
} else {
$msg = "恭喜您，该用户可用";
$code = 1;
}
//形成数组
$arr = array(
'msg' => $msg,
'code' => $code
);
echo json_encode($arr);
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
