运用Ajax和JQuery来实现表单提交效果

最新推荐文章于 2025-10-19 20:54:06 发布

原创最新推荐文章于 2025-10-19 20:54:06 发布 · 492 阅读

CC 4.0 BY-SA版权

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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">
<title>表单提交效果</title>
<script src="./jquery-3.1.1.js"></script>
</head>
<body>
<form action="" method="post">
姓名：<input type="text" name="name" id="name"/>
密码：<input type="password" name="pass" id="pass"/>
<br><br>
<input type="submit" value="Login" name="student"/>
<input type="submit" value="TeacherLogin" id="teacher"/>
</form>
		<script type="text/javascript">
		$("#teacher").click(function(){
						var name = $("#name").val();
						var pass = $("#pass").val();
						$.ajax({
									type:"post",
									url:"TeacherServlet",
									data:{name:name,pass:pass},
									statusCode:{404:function(){
										alert("找不到页面噢？")
									}},
									success:function(data,textStatus){
										alert("哈哈，测试成功了！")
									}
						})	
		})		
		</script>
</body>
</html>