溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
