天天看點

jquery 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>
           

服務端代碼(用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+"}");
    }
           

效果圖:

jquery ajax實作使用者名的異步請求
jquery ajax實作使用者名的異步請求

繼續閱讀