1. 程式人生 > >ajax - 完成非同步使用者名稱校驗和非同步自動填充.

ajax - 完成非同步使用者名稱校驗和非同步自動填充.

01_非同步使用者名稱校驗.

效果如下: 不重新整理頁面 , 輸完使用者名稱之後 , 傳送一次請求 , 進行判斷 .
在這裡插入圖片描述

準備工作:

1.首先要建立資料庫 , 並初始化表中資訊 .
2.匯入工具類 和 配置檔案.
3.建立好三層架構 , 就ok了.

html頁面: aaa.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 匯入js類庫  -->
    <script src="js/jquery.js"></script>
    <script>
        // 頁面載入事件 .
        $(function () {
            // 為使用者名稱輸入框繫結失去焦點事件.
            $("[name='username']").blur(function () {
                // 獲取使用者輸入的內容.
                var username = $(this).val();
                // 使用ajax , 不重新整理頁面的情況下 , 傳送請求.
                $.post("/check" , "username="+username , function (data) {
                     // data: 伺服器返回的資料.
                     if (data==1){
                         $("#username_msg").html("× 該使用者名稱已經存在了!").css("color","red");
                     }else {
                         $("#username_msg").html("√ 該使用者名稱可用!").css("color","green");
                     }
                })
            })
        })

    </script>
</head>
<body>
    <form method="post" action="#">
        <table>
            <tr>
                <td>使用者名稱:</td>
                <td><input type="text" name="username"></td>
                <td><span id="username_msg"></span></td>
            </tr>
            <tr>
                <td>密碼:</td>
                <td><input type="text" name="password"></td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3'><input type="submit" id="sub"></td>
            </tr>
        </table>
    </form>
</body>
</html>

web層: CheckServlet.java

@WebServlet("/check")
public class CheckServlet extends HttpServlet {
    private CheckService cs = BeanFactory.newInstance(CheckService.class);

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html; charset=utf-8");
        // 獲取使用者輸入的使用者名稱 .
        String username = request.getParameter("username");
        // 呼叫方法.
        int count = cs.check(username);
        // 看是否查到資料. 查到 - 1 , 沒有 0 .
        if (count==1){
            response.getWriter().print(1);
        }else {
            response.getWriter().print(0);
        }
    }
}

dao層: UserDaoImpl.java

public class CheckDaoImpl implements CheckDao {
    @Override
    public int selectName(String username) {
        // 建立qr物件.
        QueryRunner qr = new QueryRunner(DataSourceUtil.getDataSource());
        // sql語句.
        String sql = "select count(*) from user where name=? ";
        // 執行sql語句.
        try {
            // 因為jdbc底層預設是long型別 , 所以要轉換為int型別.
            return ((Long)qr.query(sql,new ScalarHandler(),username)).intValue();
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
    }
}

domain層: user.java

public class User implements Serializable{
    private int id;
    private String name;
	// 編寫geter/setter方法 .
}

02_非同步自動填充:

效果如下: 自動填充資料庫中存的資料 , 前提是不重新整理頁面.
在這裡插入圖片描述

jsp頁面: bbb.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="/js/jquery.js"></script>
	<script type="text/javascript">
		// 頁面載入事件. 
		$(function () {
			// 鍵盤按下彈起事件.
			$("#tid").keyup(function () {
			    // 獲取輸入的值.
                var content = $(this).val();
			    // alert($(this).val())

				if(/^\s*$/.test(content)){
				    // 為空 , 啥也不做.
				}else{
				    // 初始化div裡面的資訊.
					$("#did").empty();
					// 如果為空 , 隱藏文字框.
					$("#did").hide();

                    //將此輸入框值作為引數傳遞給後臺伺服器  返回與此相關 小米
                    $.post("/search","content="+content , function (data) {
                        // 判斷是否大於0
						if (data.length>0){
                            // 遍歷陣列.
                            $(data).each(function (index, ele) {
                                // 獲取name屬性值.
                                var kwName = ele.name;

                                // 新增文字內容.
                                var div="<div style='margin-left: 0px; padding-left: 0px' onmouseout='mout(this)' onmouseover='mover(this)'>"+kwName+"</div>";
                                $("#did").append(div);

                            })

                            $("#did").show();
					}

                    },"json")
				}

            })
        })

		function mout(obj) {
			// 背景色 變回原來的.
			$(obj).css("background-color","white");
        }

        function mover(obj) {
            // 進去之後 換個顏色. .
            $(obj).css("background-color","#999");
        }


	</script>
<title>Insert title here</title>
</head>
<body>
	<center>
		<div>
			<h1>搜尋</h1>
			<div>
				<input name="kw" id="tid"><input type="button" value="搜尋一下">
			</div>
			<div id="did" style="border: 1px solid red;width: 170px;display: none;">

			</div>
		</div> 
	</center>
</body>
</html>

servlet層: Search.java

@WebServlet("/search")
public class KwServlet extends HttpServlet {
    private KwService ks = BeanFactory.newInstance(KwService.class);

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html; charset=utf-8");
        // 獲取引數.
        String content = request.getParameter("content");

        // 使用KwService中的方法.
        List<KW> list = ks.findByContent(content);

        // 將查詢到的資料 , 轉換為json格式.
        String s = JSONArray.fromObject(list).toString();
        response.getWriter().print(s);
    }
}

dao層: search.java

public class KwDaoImpl implements KwDao {
    @Override
    public List<KW> selectByContent(String content) {
        // 建立QueryRunner物件.
        QueryRunner qr = new QueryRunner(DataSourceUtil.getDataSource());
        // 建立sql語句.
        String sql = "SELECT * FROM kw WHERE NAME LIKE ? ";
        try {
            return qr.query(sql, new BeanListHandler<>(KW.class),"%"+content+"%");
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }
}

domain層

public class KW {
    private int id;
    private String name;
    // getter / setter方法. 
}