zl程序教程

您现在的位置是:首页 >  Javascript

当前栏目

Ajax 技术应用 (jQuery 实现账户验证)

2023-04-18 14:51:07 时间

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();
	}

三、运行结果