Ajax 技術應用 （jQuery 實現賬戶驗證）

最近在學習 jquery，學習到 ajax 部分了，就把之前做過內容使用 jquery 實現一遍

這兩篇是我使用 純 js 實現的，可以先看這個，註解我也寫的比較詳細
Ajax 技術學習 （Java EE 實現） —— 用戶賬戶的驗證

Ajax 技術學習（JavaEE）—— 實現二級下拉聯動

一、前端部分

1.1 html 部分

		<form action="">
			用戶名:<input type="text" name="username" id="username" /><span id="info"></span><br />
			密 碼:<input type="password" name="password" id="password" /></br>
			<input type="submit" id="submit" value="提交" />
		</form>

1.2 js 部分

這裏是 jQuery 的語法，寫起來相比原生的 js 代碼簡潔太多，發送 get 請求 或者 post 請求均使用大寫即可

	<script type="text/javascript">
			$(function () {
				$("#username").bind("blur", function() {
					txt = $("#username").val();
					$.ajax({
						type: "POST",
						url: "AjaxCheck",
						data: {
							username:txt
						},
						success: function(res) {
							console.log("發送成功:"+res);
							if (res == "true") {
								$("#info").html("<font color='green'>該賬號可以使用</font>");
							} else{
								$("#info").html("<font color='red'>該賬號不可以使用</font>");
							}
						},
						error: function() {
							console.log("糟糕，出現錯誤了");
						}
					});
				});
			});
		</script>

二、後端部分

後端我依然是採用的 Java EE 來實現的，和前面寫過的驗證基本相差不大，後端的路徑是 AjaxCheck

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		
		// 獲取前端傳送過來的數據
		String username = request.getParameter("username");

		// 打印得到數據
		System.out.println(username);
		
		// 
		PrintWriter out = response.getWriter();
		if (username.equals("admin")) {
			out.write("false");
		} else {
			out.write("true");
		}
		out.flush();
		out.close();
	}

三、運行結果