第3章 判断用户名是否可用–案例

百度注册效果

用户名被占用:

前端基础-Ajax判断用户名是否可用_用户名

用户名没有没占用:

前端基础-Ajax判断用户名是否可用_xml_02

前台代码

<body>
<input type="text" value="" id="names">
<span id="tip"></span>
</body>
<script>
var inp = document.getElementById('names');
inp.onblur = function () {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
// alert(xhr.responseText);
if (xhr.responseText == 1) {
var h = '<font color="red">用户名已经被占用</font>';
document.getElementById('tip').innerHTML = h;
} else {
var h = '<font color="green">用户名可用</font>';
document.getElementById('tip').innerHTML = h;
}
}
}
xhr.open('get', '/baidu?names=' + inp.value);
xhr.send();
}
</script>

http.js

else if(urls.pathname == '/test'){
res.end('123')
}else if(urls.pathname == '/baidu'){
if(urls.query.names == 'admin'){
res.end('1')
}else{
res.end('0')
}
}