1.录入用户名和密码,提交到后台servlet.
2.判断用户名和密码是否争取,如果正确,跳转拿到首页,如果错误,提示”用户名或者密码错误.”
效果图:
输入正确:
输入错误:
代码:
login.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/day18/js/jquery/jquery.js"></script>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
<form action="" method="">
用户姓名:<input type="text" name="username" id="username"/>    <span id="msg"></span><br/>
用户密码:<input type="text" name="password" id="password"/><br/>
<input type="button" value="登录" id="submit"/>
</form>
</body>
</html>
LoginServlet.java:
package text.ajax.servlet;
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("/loginServlet")
public class LoginServlet extends HttpServlet{
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
PrintWriter writer=resp.getWriter();
String msg="";
String username=req.getParameter("username");
String password=req.getParameter("password");
if("rose".equals(username)&&"123".equals(password)) {
msg="登陆成功";
}else {
msg="用户名或者密码错误";
}
writer.write(msg);
}
}
login.js:
$(function(){
$("#submit").click(function(){
var username=$("#username").val();
var password=$("#password").val();
//发送请求,判断用户名和密码是否正确
$.post(
"/day18/loginServlet",
{"username":username,"password":password},
function(data){
if(data=="登陆成功"){
//登陆成功之后,跳转页面
window.location.href="/day18/main.html";
}else{
//失败的时候,提供错误的信息
$("#msg").css("color","red").html(data);
}
},
"text"
);
})
})