您的位置：首页 > 其它

【Ajax】实现注册页面判断用户名是否可用的提示—异步加载

2015-06-16 13:36 726 查看

效果如图

　　

　　在注册或登录网站时，当我们输入错误格式的账号或信息时，会看到这种提示。

　　那怎么实现呢，通过ajax异步加载的方式，可以实现不刷新页面就显示出该提示。

实现

　　首先创建一个JSP，写一个简单的页面。

<body>
用户名：<input type="text" name="name" id="xxx"/><label></label><br>
年  龄：<input type="text" name="age"/><br>

</body>

　　然后写一段jQuery函数

　　　　实现当用户不输入用户名，鼠标点击年龄输入框或者用户名输入不为指定的，则提示用户名输入错误/为空

<script type="text/javascript" src="<c:url value='/jquery-1.5.1.js'/>"></script><!-- 标签，需导入c标签库 -->
<script type="text/javascript">
$(function(){
$("#xxx").blur(function(){//当xxx失去焦点时
var value = $("#xxx").val();//获取id为xxx的元素
$.ajax({
url:"/Tool_Test/AjaxServlet",//要请求服务器URL
data:{val:value},//这是一个对象，它表示请求参数 服务器端可以使用request。getParamet() 来获取
async:true,//是否为异步请求
cache:false,//是否缓存结果
type:"POST",//请求方式
dataType:"json",//服务器返回的数据是什么类型   json:接收一个对象
success:function(result){//这个函数会在服务器执行成功时被调用，参数result就是服务器返回的值
if(result){
$("label").text("正确");
}else{
$("label").text("不能为空/输入错误");
}
}
});
});
});
</script>

　　当然最后要来一个Servlet

public class AjaxServlet extends HttpServlet {

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String value = request.getParameter("val1");//在adjx的data中进行设置
if(value.equals("zhengbin")){
//用jquery的 ajax回调函数 返回的值就是 print中的字符串
response.getWriter().print("true");
}else{
response.getWriter().print("false");
}
}
}

实现效果

　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航