前言:
在我们开发人员完成注册模块功能的时候,为了方便用户,常常都会加上一个实时验证账号是否被注册的细节,这样的话用户就不用在提交时候,提示改账户已经被注册。
首先我们看下效果:
实现该功能的过程
- 准备好jquery库(并且引入到jsp中)s
<script type="text/javascript" src="../jq/jquery-3.3.1.js"></script>
- 写入Ajax逻辑代码s
<script type="text/javascript">
$(function() {
$("#cc").keyup(function() {//键盘输入时候就就行触发
$.ajax({
type : "post",
url : "NewFile6.jsp",//将值传到指定的后台(可用request获取的)
data : "name=" + $("#cc").val(),//传name值给NewFile6.jsp中
dataType : "text",
success : function(data) {
//NewFile.jsp 返回一个值过来进行下面的提示判断
if (data == "y") {
$("#span").css("color", "#0f0").html("用户名可用");
} else {
$("#span").css("color", "red").html("用户名已被注册");
}
}
});
});
});
</script>
- 然后在该jsp页面下写Html代码
- 如下
<body>
<p>
用户名:<input id="cc" type="text" name="name" /><span id="span"></span>
</p>
</body>
接下来模拟下后台
- 另创一个jsp页面
response.setContentType("application/json;charset=utf-8");
String name = new String(request.getParameter("name").getBytes("ISO-8859-1"), "UTF-8");//接受前面ajax传过来的值
if(name.equals("123")){ (123模拟为数据库中已经注册时账户)按当前输入框中输入是值进行配对
out.clear(); // 清除前面的html标签
out.print("d");//返回到 ajax data的值(被注册返回d)
}else{
out.clear(); // 清除前面的html标签
out.print("y");
}