使用Ajax動態判斷用戶名是否存在。

時間 2021-08-12

標籤 html ajax 服務器 ide post url orm xml htm 欄目 Ajax 简体版

原文原文鏈接

簡介ajax:html

AJAX 最大的優勢是在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容。ajax

return true;
} else {
document.getElementById("refont").innerHTML = "兩次密碼輸入不一致";
return false;
}
}

//使用ajax進行操做
function getXMLHttpRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}

function onusernamechange() {
//ajax的邏輯
var xmlhttp=getXMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){服務器

//從服務器得到的數據
var result=xmlhttp.responseText;
var usernamefont=document.getElementById("usernamefont");
if("1"==result){ide

//更新局部網頁
usernamefont.color="red";
usernamefont.innerHTML="用戶名已經存在";
}else{
usernamefont.color="green";
usernamefont.innerHTML="恭喜可用";
}
}
};
var url="${pageContext.request.contextPath}/servlet/CheckUserName?username="+document.getElementById("username").value;
xmlhttp.open("get",url);
xmlhttp.send();
}
</script>
</head>

<body>
<form method="post">
用戶名：<input type="text" id="username" name="username" οnchange="onusernamechange();" /><font
id="usernamefont" color="red"></font><br> 密碼：<input
id="password" type="password" name="password" /><br> 重複密碼：<input
id="repassword" type="password" name="repassword" /><font
id="refont" color="red"></font><br> 頭像：<input type="file"
name="icon" /><br> <input type="submit" value="註冊"
οnclick="return myfunction();" />
</form>
</body>
</html>post