您好,登录后才能下订单哦!
<!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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。