注：【网页版】右上方的悬浮框（ 有目录索引 ）

一、代码

<form>
	<p><input autofocus name="userName" id="userName" type="text" placeholder="用户名" /></p>
	<p><input name="userPassword" id="userPassword" type="password" placeholder="密码" /></p>
	<p><input id="loginFormBtnSubmit" type="button" value="登录"/></p>
	# 请注意！表单并不会提交（ 绑定事件的按钮 type="button" ）
</form>

    <script type="text/javascript">
        jQuery(function ($) {
        
	        /*
	        	登录按钮，点击事件
	        	1. 校验数据合法性
	        	2. ajax 请求，判断用户是否合法
			*/
            $("#loginFormBtnSubmit").on("click",function () {
            
                var userName = $("#userName").val(); //获取用户名
                var userPassword = $("#userPassword").val(); //获取密码
                
                // 判断：输入框数据，是否为空
                if(userName===""||userPassword===""){
                    alert("用户名或密码不为能空");
                    return false; //此处中断，登录按钮点击事件下面不再执行
                }
                console.log("用户名："+userName +"；密码："+userPassword ); //作调时用
   
                function callback(result){ //回调函数，用来接收（ service 返回的参数 ）
                   if(result==="success"){
                        window.location.href = 'index.jsp';
                        // 因为转至 index.jsp 并没有特别的事务处理，则此处不需经过 servlet
                        // 用户信息，已经在返回 success 时。保存至 session
                    } else {
                        alert(result);
                    }
                } //end of callback(result)
                
                var url = "/UserServlet";
                var data = "userName="+userName+"&userPassword="+userPassword;  // 传递的参数
                var type = "text";
                $.post(url,data,callback,type);
                
            }); //end of $("#loginFormBtnSubmit").on("click",function(){})
            
        });
    </script>

1-2】UserServlet

// import javax.servlet.http.HttpServlet
public class UserServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        /*
        	登录模块
        	1. 
		*/
		// 获取参数，并封装至 实体类中
        String name = req.getParameter("userName"); //ajax 异步请求传递过来的用户名
        String passWord = req.getParameter("userPassword");
        User user = new User(null,name,passWord,null,null,null);

		// 调用 service 层中的方法，得到查询数据库的结果
		// 此处查询语句是通过【用户名】查询
        user = new UserServiceImpl().getUserInfoByUserName(user);

		// 返回查询信息至 login.jsp 页面
        PrintWriter writer = resp.getWriter();
        if(user == null){
            // 用户不存在
            writer.print("用户不存在");
        } else if(!passWord.equals(user.getPassword())){
            // 用户名或密码不对
            writer.print("用户名或密码不对");
        } else if(user.getStatus() == 0){
            // 被冻结
            writer.print("账户被冻结");
        } else {
	        // 可以登录。将用户信息保存在 session 域中
            HttpSession session = req.getSession();
            session.setAttribute("user",user);
            // 下一行是调用 service 层方法。（ 通过【用户 id】查询另一张表，返回【用户类型】 ）
            session.setAttribute("type",new UserTypeServiceImpl().getUserType(user));
            writer.print("success");
        }
    }
    
}