1.使用原生的AJAX
<body>
<form >
//οnblur="userValidate(this)"关联一个事件
<p>用户名：<input type="text" name="loginId" id="userId" οnblur="userValidate(this)"><span id="s"></span></p>
<p>密码：<input type="password" name="password"></p>
<p><input type="submit" value="登录"></p>
</form>
</body>
2.编写AJAX原生代码
<script type="text/javascript">
var xhr
//1.创建XMLHttpRequest对象的函数
function getXMLHttpRequest(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
}
//2.文本框失去焦点事件
function userValidate(txtName){
//获得XMLHttpRequest
xhr = getXMLHttpRequest();
var userName = txtName.value;
//初始化
//
xhr.open("POST","AccountSer?name="+userName,true);
//设置回调函数
xhr.onreadystatechange=resultData;
xhr.send("");
}
//3.回调函数
function resultData(){
var span = document.getElementById("s");
if(xhr.readyState==4){//服务器返回在状态
if(xhr.status==200){//服务端正确返回
//接收返回的数据
if(xhr.responseText=="1"){
span.style.color="green";
span.innerHTML="用户名正确";
}else{
alert("到这了吗");
span.style.color="red";
}
}
}
}
</script>
3.查询并返回数据
//得到传过来的值
String name = request.getParameter("name");
//通过name从数据库查询
AdminService adminService = new AdminService();
Admin admin = adminService.findByLoginId(name);
if(admin != null) {
//返回数据
response.getWriter().write("1");
}else {
response.getWriter().write("0");
}
410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
