JQuery+Ajax实现用户名的检测(用户名是否已存在)

最新推荐文章于 2019-07-28 16:17:35 发布

sosohotsummer

最新推荐文章于 2019-07-28 16:17:35 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： jquery ajax function json string object

本文链接：https://blog.youkuaiyun.com/sososohotsummer/article/details/7775718

JS 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用JavaScript和jQuery实现的简单用户名验证功能。当用户离开输入框时，该功能会通过AJAX请求检查用户名是否已被占用，并在页面上显示相应的提示信息。如果用户名已存在，则会在用户尝试提交表单时阻止此操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//JS中的代码：

   $(document).ready(function(){
   checkConfirm();

   //验证用户名是否存在
   function checkConfirm(){
   $("#username").blur(function(){
   var username = $(this).val();
   $.get("../../admin/UserManagerAction!checkuser?username="+username,function(data){
       if(data == 'ok'){
           $("#userInfo").html("<font color=\"red\">您输入的用户名已存在！请重新输入！</font>");
       }
       else{
           $("#userInfo").html("");
       }
   });
   return false;
   });
   }

    $("#sbtn").click(checkpost);
    function checkpost(){

       if($("#userInfo").text()!=""){
       alert("用户名已存在，请重新输入！");
       return;

}

});

//body中的代码

用户名:<input type="text" size="15" name="username" id="username"><font color="red">*</font><span id="userInfo"></span>

//action中的代码

//检查输入用户名是否已存在
   public String checkuser() {
       String json=""; //返回的JSON字符串
       DataTool instance = DataTool.getInstance();
       String username = request.getParameter("username");
       String sql="select * from t_userlist where username=?";
       List<Map<String,Object>> userList=instance.executeQuery(sql, new Object[]{username});
       if (userList.size()>0) {
           json = "ok";
       } else {
           json = "fail";
       }
       try {
           response.getWriter().write(json);
       } catch (IOException e) {
           e.printStackTrace();
       }
       return null;
   }