<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/java script">
function login(){
//1.获取到用户名与密码
var userName = document.getElementById("userName").value;
var pwd = document.getElementById("pwd").value;
//2.创建ajax对象
var xhr= new XMLHttpRequest();
//3.准备请求（请求类型，后台地址）
xhr.open("post","/login");
//如果是post请求，必须设置请求头的类型，后台才能够接收到前台传过去的相应的数据
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//3.监听ajax的状态变化
xhr.onreadystatechange= function(){
if(xhr.status==200 && xhr.readyState==4){
var result = xhr.responseText;
// responseText获取到的都是字符串
if(result == "true"){//登录成功
window.location.href="https://www.baidu.com";
}else{//登录失败
document.getElementById("erSpan").innerHTML="用户名或密码错误！";
}
}
}
//4.发送请求:post请求必须通过.send()传数据到后台
xhr.send("userName="+userName+"&pwd="+pwd);
}
</script>
</head>
<body>
<span id="erSpan"></span>
<form action="/login" method="post">
用户名：<input type="text" name="userName" id="userName" /> <br />
密码<input type="text" name="pwd" id="pwd" /><br />
<input type="button" value="ajax提交" onclick="login()" />
</form>
</body>
</html>
package ajax.servlet;
import java.io.IOException;
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 LoginServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//字符集编码，必须写，不然中文会乱码
req.setCharacterEncoding("utf-8");
resp.setContentType("utf-8");
//接收到前台传过来的值
String userName = req.getParameter("userName");
String pwd = req.getParameter("pwd");
//System.out.println(userName+":"+pwd);
//测试
if("流星".equals(userName) && "123".equals(pwd)){
//向前端返回Boolean类型的true,但前端接收到的是String类型
resp.getWriter().print(true);
}else{
resp.getWriter().print(false);
}
}
}