ajax实现输入用户名异步提示是否可用

Posted 2021-01-13 Waves-a

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax实现输入用户名异步提示是否可用相关的知识，希望对你有一定的参考价值。

<script type="text/javascript">
//页面加载完毕后执行
$(document).ready(function(){
        //用户名输入框绑定事件
        $("#username").focusout(function(){
            //得到输入框的值
            var $text = $("#username").val();
            //光标离开，ajax发送请求
            $.ajax({
                url:"/test/myServlet",
                type:"post",
                data:{"name":$text},
                success:function(data){
                    //data是返回的值，内部通过parse()方法将json字符串转换成json对象
                    var $info = "";
                    //获得返回的值
                    var $exit = data.exit;
                    //判断再显示
                    if($exit){
                        $info="可以使用";
                        $("#msg").css("color","green");
                    }else{
                        $info="该用户已存在！";
                        $("#msg").css("color","red");
                    }
                    $("#msg").html($info);
                },
                error:function(data){
                    alert("请求错误");
                },
                dataType:"json"

            });
        });        
    });

</script> <body> 用户名：<input type="text" id="username"> <span id="msg"></span> </body>
--------------------- 
作者：菜鸟一梦 
来源：CSDN 
原文：https://blog.csdn.net/m0_37860769/article/details/78984299?utm_source=copy 
版权声明：本文为博主原创文章，转载请附上博文链接！

服务端代码（用servlet模拟）：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        //获得输入框输入的值
        String name = request.getParameter("name");
        boolean b = false;
        if(name.equals("123")){
            b=true;
        }
        //以JSON字符串的形式返回
        response.getWriter().write("{"exit":"+b+"}");
    }

技术分享图片

以上是关于ajax实现输入用户名异步提示是否可用的主要内容，如果未能解决你的问题，请参考以下文章

ajax基础语法ajax做登录ajax做用户名验证是否可用ajax做关键字查询动态显示ajax做用表格显示数据并增加操作列