Ajax 技术应用（jQuery 实现账户验证）

Gorit

发布于 2021-12-08 21:47:57

8870

发布于 2021-12-08 21:47:57

文章被收录于专栏：Gorit 带你学全栈系列

Ajax 应用 with 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("该账号可以使用");
							} else{
								$("#info").html("该账号不可以使用");
							}
						},
						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();
	}