Ajax驗證用戶名

tags: `Ajax介紹`

程式編寫1

login.jsp













































<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.4.js"></script>

    <script>
        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                //前面的"name"是要回傳到a3頁面判定
                //後面的$("#name")則是從下方的id=name來提取數據回傳
                data:{"name":$("#name").val()},
                success:function (data){
                    if(data.toString() === 'ok'){
                        console.log(1);
                    }
                }
            })
        }

        function a2(){
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"pwd":$("#pwd").val()},
                success:function (data){
                    console.log(data);
                }
            })
        }
    </script>
</head>
<body>
    <p>
        用戶名：<input type="text" id="name" onblur="a1()">
        <span id="userInfo"></span>
    </p>

    <p>
        密碼：<input type="text" id="pwd" onblur="a2()">
        <span id="pwdInfo"></span>
    </p>
</body>
</html>

AjaxController 新增核對的判斷





















    @RequestMapping("/a3")
    public String a3(String name,String pwd){
        String msg = "";
        if(name != null){
            //admin 這些數據應該在數據庫查詢，這裡為了簡便所以固定
            if("admin".equals(name)){
                msg = "ok";
            }else {
                msg = "用戶名有誤";
            }
        }
        if(pwd != null){
            //123456 這些數據應該在數據庫查詢，這裡為了簡便所以固定
            if("123456".equals(pwd)){
                msg = "ok";
            }else {
                msg = "密碼有誤";
            }
        }
        return msg;
    }

測試：

1.讓點擊失去焦點後，回傳a3方法

2.輸入預設正確的，respon結果為ok

3.輸入錯誤的，respon結果為"用戶名有誤"

4.帳號正確密碼錯誤，respon結果為"密碼有誤有誤"

測試成功！

增加提示顯示在頁面中

































    <script>
        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                //前面的"name"是要回傳到a3頁面判定
                //後面的$("#name")則是從下方的id=name來提取數據回傳
                data:{'name':$("#name").val()},
                success:function (data){
                    if(data.toString() === 'ok'){
                        $("#userInfo").css("color","green");
                    }else{
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            });
        }

        function a2(){
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"pwd":$("#pwd").val()},
                success:function (data){
                    if(data.toString() === 'ok'){
                        $("#pwdInfo").css("color","green");
                    }else{
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(data);
                }
            });
        }
    </script>

測試

成功！

Ajax驗證用戶名

tags: Ajax介紹

程式編寫1

login.jsp

AjaxController 新增 核對的判斷

測試：

增加提示顯示在頁面中

測試

Read more

文件上傳&下載回顧

登入判斷驗證

攔截器是什麼

jQuery.post的使用

tags: `Ajax介紹`

AjaxController 新增核對的判斷