话不多说:直接效果图
在Servlet里面设置账号和密码经行登录
登录成功:到下一个页面
登录失败:在当前页面进行一个弹框
看代码:
service代码:
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.swing.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.lang.*;
@WebServlet(name = "AjaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out=response.getWriter();
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String name = "Admin";
String pwd = "A123456";
String ajaxName = request.getParameter("name");
String ajaxPwd = request.getParameter("pwd");
if (name.equals(ajaxName) && pwd.equals(ajaxPwd)) {
out.print("ok");
} else {
out.print("error");
}
}
}
HTML代码
<div id="div">
<form action="test" method="get">
<div class="login">
账号:<input type="text" name="name" id="name" onblur="regName()"/><span id="NameSpan"></span>
</div>
<div class="login">
密码:<input type="text" name="pwd" id="pwd" onblur="regPwd()"/><span id="PwdSpan"></span>
</div>
<div class="button">
<input id="input" type="button" value="登录"/>
</div>
</form>
</div>
css样式:
<style>
#name {
width: 180px;
height: 30px;
border: 1px solid black;
border-radius: 15px;
margin-top: 50px;
}
#pwd {
width: 180px;
height: 30px;
border: 1px solid black;
border-radius: 15px;
margin-top: 50px;
}
#div {
font-size: 15px;
width: 300px;
height: 300px;
margin-left: 50px;
border: 1px solid black;
}
#input {
margin-top: 50px;
border-radius: 15px;
width: 100px;
height: 50px;
border: 1px solid black;
}
.login {
margin-left: 15px;
}
.button {
margin-left: 50px;
}
</style>
JavaScript ajax代码:
$(function () {
$("#input").on("click", function () {
$.ajax({
type: "post",
url: "test",
data: {
name: $("#name").val(),
pwd: $("#pwd").val(),
},
dataType: "text",
success:function (data){
if (data == "ok") {
window.location.href = "show.jsp";
} else {
alert("登录失败");
}
}
});
});
});
下一步进行修改,请随时关注