您好,登錄后才能下訂單哦!
<!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="注冊(cè)">
</li>
</ul>
</form>
<script>
//獲取輸入框
var user = document.getElementById('user');
//在填寫用戶名完畢,失去焦點(diǎn)時(shí),發(fā)出ajax請(qǐng)求
user.onblur = function(){
//第一步,創(chuàng)建xhr對(duì)象
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);
//第三步,監(jiān)聽狀態(tài)變化,在返回響應(yīng)結(jié)果的時(shí)候,處理返回結(jié)果
xhr.onreadystatechange = function(){
//需要判斷,確保發(fā)送請(qǐng)求成功請(qǐng)求返回成功
if (xhr.readyState == 4 && xhr.status == 200) {
//接受返回值
//使用JSON對(duì)象的靜態(tài)方法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);
/*將返回結(jié)果寫到span標(biāo)簽中
var tips = document.getElementById('msg')
tips.innerHTML = json_array.msg;
if (json_array.code == 1) {
tips.className = "ok";
} else {
tips.className = "bad";
}*/
}
}
//第四步,發(fā)送請(qǐng)求
xhr.send(null);
}
</script>
</body>
</html>
reg_json.php的代碼:
<?php
$username = $_GET['username'];
$users = array('root','admin','test');
if (in_array($username,$users)) {
$msg = "對(duì)不起,該用戶名已被占用";
$code = 0;
} else {
$msg = "恭喜您,該用戶可用";
$code = 1;
}
//形成數(shù)組
$arr = array(
'msg' => $msg,
'code' => $code
);
echo json_encode($arr);
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。