初学者学习ajax表单提交
适合初学者学习ajax表单提交的全部代码如下：
1. index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.3.1/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#ti").click(function() {
var data = $("form").serialize();
$.ajax({
type: "post",
url: "login",
data: data,
dataType: "text",
success: function(msg) {
if(msg == "userNameEmptyError"){
alert("用户名不能为空")
}else if(msg == "userPassEmptyError"){
alert("用户密码不能为空")
}else if(msg == "loginSuccess"){
window.location.href = "success.jsp";
}else if(msg == "loginFailed"){
alert("用户名或密码错误")
}
},
error: function(msg) {
alert("报错了");
}
})
})
});
</script>
</head>
<body>
<form method="post" id="form">
<input type="text" name="userName"value="" />
<input type="password" name="userPass" />
<input type="submit" id="ti" value="登录"/>
</form>
</body>
</html>
2. A.java
package z;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/login")
public class A extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
String userName = request.getParameter("userName");
String userPass = request.getParameter("userPass");
if(userName==null||"".equals(userName)) {
out.write("userNameEmptyError");
return;
}else if(userPass==null||"".equals(userPass)) {
out.write("userPassEmptyError");
return;
}else if("admin".equals(userName)&&"admin".equals(userPass)) {
out.write("loginSuccess");
return;
}else {
out.write("loginFailed");
return;
}
}
}
2. success.jsp
<%@ 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>
</head>
<body>
登录成功
</body>
</html>
提供CDN加速