模态框配合ajax实现用户登录

最新推荐文章于 2023-06-26 21:07:48 发布

青栀微凉

最新推荐文章于 2023-06-26 21:07:48 发布

阅读量562

点赞数 1

文章标签： java ajax web jsp

本文链接：https://blog.csdn.net/weixin_46006696/article/details/108816708

版权

在模态框中使用ajax实现异步的用户登录,返回数据在页面展示用户名信息

今天测试做了一个登录案例,表单使用的是bootstrap的模态框进行展示.后台访问数据库得到的用户信息存入session中,然后在页面展示用户的登录名.

问题:如果登录失败,后台只能重定向到首页面展示,并不能提示用户展示失败信息.

目前解决:在前端页面使用ajax异步请求登录,后台通过response写入信息,前端ajax获取返回数据后判断数据信息在页面进行对应的展示.

------------------------------------------------------上代码-------------------------------------------------------

前台页面(表单以及ajax代码):

<%--密码登录--%>
<div class="tab-pane fade in active" id="pwdReg">
     <form id="pwdLoginForm"  method="post">
         <input type="hidden" name="action" value="pwdLogin">
         <div class="modal-body">
             <div class="form-group">
                 <label>用户名</label>
                 <input type="text" class="form-control" id="login_username" name="username"
                   placeholder="请输入用户名">
        </div>
        <div class="form-group">
             <label>密码</label>
             <input type="password" class="form-control" id="login_password" name="password"
                    placeholder="请输入密码">
         </div>
         <div class="form-group">
             <label id="login_msg"></label>
         </div>
        </div>
        <div class="modal-footer">
            <input type="reset" class="btn btn-primary" value="重置">
            <input type="button" id="pwdLogin" class="btn btn-primary" value="登录"/>
        </div>
    </form>
</div>

<%--jQuery支持的ajax--%>
<script>
    $("#pwdLogin").click(function () {
        var username = $("#login_username").val();
        var password = $("#login_password").val();
        // jQuery支持的ajax
        $.ajax({
            url:"${pageContext.request.contextPath}/LoginServlet",  // 提交到后台的servlet
            data:"username="+username+"&password="+password, // 通过拼接的形式传递参数
            type:"post", // 提交类型为post
            success:function (returnData) {
                // 判断返回值是否为登录成功 成功则直接跳转为index页面
                if (returnData.toLocaleString() === "登录成功"){
                   location.href = "http://localhost:8080/travel/index.jsp";
                }else {
                    // 其他信息则为登录失败
                    // 登录失败直接在模态框展示错误信息
                    $("#login_msg").text(returnData);
                }
            }
        });
    });
</script>

后台java代码(后台直接使用servlet,从数据库中查询信息,返回对应的实体类对象,存入session):

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            Map<String, String[]> map = request.getParameterMap();
            User user = new User();
            BeanUtils.populate(user,map);
            System.out.println(user.getUsername()+"  "+user.getPassword());
            UserService userService = new UserServiceImpl();
            User currUser = userService.login(user);
            if (currUser!=null){
                // 登录成功 将用户信息存入session
                request.getSession().setAttribute("currentUser",currUser);
                // 给ajax返回信息表示登录成功
                response.getWriter().print("登录成功");
            }else {
                // 登陆失败直接给ajax请求发送信息
                response.getWriter().print("用户名或密码错误");
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }