AJAX实现账号密码验证-CFANZ编程社区

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html, body {
	height: 100%;
	overflow: auto;
}

body {
	background: url(ad.jpg) top left;
	background-size: 100%;
}

span {
	color: blue;
	font-size: 30px;
}

#a {
	font-size: 20px;
}
</style>
</head>
<body>
	<div style="width: 100%; text-align: center">
		<h1 style="color: red">新增图书信息</h1>
		<form action="${pageContext.request.contextPath}/jsp/AddbookServlet"
			id="forms" method="get">
			<div>
				<span>图书名称：</span><input type="text" name="name" class="name" />
			</div>
			<br>
			<div>
				<span>图书作者：</span><input type="text" name="author" class="author" />
			</div>
			<br>
			<div>
				<span>购买日期：</span><input type="text" name="data" class="data" />
			</div>
			<br>
			<div>
				<span>&nbsp;图书类别：</span> <select id="typebook" name="typebook1"
					class="typebook1" style="color: red">
					<option value="0">选择所属分类</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>
				</divcone>
				<br>
				<div>
					<span>&nbsp;</span><input type="submit" value="增加图书" name="subbook"
						id="subbooks" style="font-size: 30px" />
				</div>
		</form>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$("input[name=name]").blur(function() {
				/*  if($("input[name=name]").val()==""){
					return;
				} */
				var data = {
					"name" : $("input[name=name]").val()
				}
				$.ajax({
					"url" : "NamebookServlet", // 要提交的URL路径
					"type" : "get", // 发送请求的方式
					"data" : data, // 要发送到服务器的数据
					"dataType" : "text", // 指定传输的数据格式
					"success" : function(result) { // 请求成功后要执行的代码
						if (result == 'true') {
							alert("图书名称和作者名称不能为空")
							$("input[name=name]").val("格式为（xxx）");
							$("input[name=name]").focus();
							console.log("图书名称和作者名称不能为空11111");
							return;
						}
					},
					"error" : function() {
						// 请求失败后要执行的代码
					}
				});

			})
			$("input[name=author]").blur(function() {

				var data = {
					"author" : $("input[name=author]").val()
				}
				$.ajax({
					"url" : "AuthorbookServlet", // 要提交的URL路径
					"type" : "get", // 发送请求的方式
					"data" : data, // 要发送到服务器的数据
					"dataType" : "text", // 指定传输的数据格式
					"success" : function(result) { // 请求成功后要执行的代码
						if (result == 'true') {
							alert("图书名称和作者名称不能为空")
							$("input[name=author]").val("格式为（xxx）");
							$("input[name=author]").focus();
							console.log("图书名称和作者名称不能为空11111");
							return;
						}
					},
					"error" : function() {
						// 请求失败后要执行的代码
					}
				});

			})

			$("input[name=data]").blur(function() {

				var data = {
					"data" : $("input[name=data]").val()
				}
				if ($("input[name=data]").val() == "") {
					$("input[name=data]").val("格式为（yyyy-MM-dd）");
					alert("时期格式错误")
					return;
				}
				$.ajax({
					"url" : "DatabookServlet", // 要提交的URL路径
					"type" : "get", // 发送请求的方式
					"data" : data, // 要发送到服务器的数据
					"dataType" : "text", // 指定传输的数据格式
					"success" : function(result) { // 请求成功后要执行的代码
						if (result == 'true') {
							alert("时期格式错误")
							$("input[name=data]").val("格式为（yyyy-MM-dd）");
							$("input[name=data]").focus();
							console.log("时期格式错误11111");
							return;
						}
					},
					"error" : function() {
						// 请求失败后要执行的代码
					}
				});

			})
			$("#typebook").blur(function() {

				var data = {
					"data" : $("#typebook").val()
				}
				if ($("#typebook").val() == "0") {
					alert("先选择图书分类")
				}
			})

			$('#forms').submit(function() {
				if ($("input[name=name]").val() == "") {
					alert("添加图书失败");
					return;
				}/* else{
									alert("添加图书成功");
								} */
				var data = {}
				$.ajax({
					"async" : false,
					"url" : "AddbookServlet", // 要提交的URL路径
					"type" : "get", // 发送请求的方式
					"data" : data, // 要发送到服务器的数据
					"dataType" : "text",
					"beforeSend" : function() {

					},
					// 指定传输的数据格式
					"success" : function() {
						// 请求成功后要执行的代码

						alert("添加图书成功");
					},
					"error" : function() {
						alert("添加图书失败");
					}

				});
			})
		</script>
	</div>
</body>
</html>