为了账号安全,请及时绑定邮箱和手机立即绑定

用JavaWeb开发登录功能使用学习ajax+jquery遇到点麻烦,在线等求解

用JavaWeb开发登录功能使用学习ajax+jquery遇到点麻烦,在线等求解

慕粉3505864 2017-12-07 11:53:15
UserServlet代码public class UserServlet extends BaseServlet { /**  * 登录的功能  */ public String login(HttpServletRequest req, HttpServletResponse resp) { // 7.验证码验证 // 7.1获取验证码 String code = req.getParameter("code"); // 7.2获取生成的验证码 String rand = req.getSession().getAttribute("IdentifyCode").toString(); // 8.检查验证码 if (code != null && !code.trim().equals("")) { if (!code.equalsIgnoreCase(rand)) { try { resp.getWriter().write("codeFalse"); } catch (IOException e) { e.printStackTrace(); } } else { // 1.接收数据 Map<String, String[]> map = req.getParameterMap(); User user = new User(); System.out.println("获取数据:-------" + map); // 2.封装数据 try { BeanUtils.populate(user, map); // 3.调用Service层处理数据 UserService us = new UserService(); User existUser = us.login(user); System.out.println("=======existUser========" + existUser); if (existUser == null) { // 用户登录失败 // req.setAttribute("msg", "用户名或密码错误!"); resp.getWriter().write("LoginFail"); // "/login/login2.jsp" } else { req.getSession().setAttribute("existUser", existUser); System.out.println("------用户登录成功!!!!!-------"); resp.getWriter().write("LoginSuc"); } } catch (Exception e) { e.printStackTrace(); } } return null; } return null; } }jsp页面<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <head> <title>登陆操作</title> <meta http-equiv="content-type" content="text/html; charset=utf8" /> <link rel="stylesheet" type="text/css" href="Styles/base.css" /> <link rel="stylesheet" type="text/css" href="Styles/admin-all.css" /> <link rel="stylesheet" type="text/css" href="Styles/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="Styles/login.css" /> <script type="text/javascript" src="Scripts/jquery.js"></script> <script type="text/javascript" src="Scripts/jquery.spritely-0.6.js"></script> <script type="text/javascript" src="Scripts/chur.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.ajaxSetup({cache:false});//清楚ajax //刷新验证码 $("#randCode,#randCode2").click(function(e){ $("#randCode").attr("src","RandCodeServlet?t="+new Date().getTime()); //阻止超链接默认行为 e.preventDefault(); }); </script> </head> <body> <div id="clouds" class="stage"></div> <div class="loginmain"></div> <div class="row-fluid"> <form name="form1" method="post" action="${pageContext.request.contextPath }/user"> <input type="hidden" name="method" value="login" /> <h1>聊 天 系 统</h1> <p> <label>帐&nbsp;&nbsp;&nbsp;号:<input type="text" id="username" name="username" /> </label> </p> <p> <label>密&nbsp;&nbsp;&nbsp;码:<input type="password" id="password" name="password" /> </label> </p> <p class="pcode"> <label>&nbsp;&nbsp;&nbsp;验&nbsp;&nbsp;证&nbsp;&nbsp;码:<input type="text" id="txtCode" name="code" maxlength="4" class="code" /> <img id="randCode" src="RandCodeServlet" title="看不清换一张" class="imgcode" /> <a id="randCode2" href="RandCodeServlet">换一张</a> </label> </p> <p class="tip" id="divMsg">&nbsp;</p> <hr /> <input id="submit" type="submit" value=" 登 录 " class="btn btn-primary btn-large login" /> &nbsp;&nbsp;&nbsp;<input id="button2" type="button" value=" 注 册 " class="btn btn-large" /> </form> </div> </body> </html> <script> </script>想用ajax+jquery对登录检验,登陆成功,登陆失败,账号密码验证码不能为空的检查,然后显示在页面上的<p class="tip" id="divMsg">&nbsp;</p>位置以下是自己写的ajax+jquery的代码,可是无法实现,有人帮我修改一下吗?? //登陆的业务操作 $("#submit").click(function(){ var name=$("#username").val(); var pass=$("#password").val(); var code=$("#txtCode").val(); alert("name="+name+"pass"+pass+"code"+code); if(name!="" && pass!="" && code!=""){ //发出ajax请求 $.ajax({ type:"post", url:"${pageContext.request.contextPath }/user?method=login", data:"action=Login&d="+(new Date()).valueOf()+"&name="+name+"&pass="+pass+"&code"+code, success:function(responseText){ alert("--------"+data+"--------"); if(responseText=="LoginSuc"){ $("#divMsg").show().html("登陆成功!"); //登陆按钮变色 $("#submit").attr("disabled","disabled"); window.location="chatRoom.jsp"; }else if(responseText=="LoginFail"){ //登陆失败 $("#divMsg").show().html("登陆失败,请重新登陆!"); return false; }else if(responseText=="codeFalse"){ $("#divMsg").show().html("验证码错误!"); return false; }else if(responseText=="LoginNot"){ $("#divMsg").show().html("你已经登陆过了"); return false; } }, error:function(xmlHttpReq){ $("#divMsg").show().html("网络故障:"+xmlHttpReq.status); }   }); }else{ if(name=""){ $("#divMsg").show().html("账号不能为空"); return false; } if(pass=""){ $("#divMsg").show().html("密码不能为空"); return false; } if(code=""){ $("#divMsg").show().html("验证码不能为空"); return false; } } }); });等求解,谢谢谢谢!!!等求解,谢谢谢谢!!!等求解,谢谢谢谢!!!
查看完整描述

1 回答

?
堂堂堂堂糖糖糖童鞋

TA贡献101条经验 获得超58个赞

既然是ajax提交表单,就不需要再form标签中指定action了,简单改了一下js代码:

$(function () {
    $('#submit').on('click', function () {
        var name=$("#username").val();
        var pass=$("#password").val();
        var code=$("#txtCode").val();
        
        function validateForm () {
            if (!name) {
                $('#divMsg').text('账号不能为空').show();
                return false
            }
            else if (!pass) {
                $('#divMsg').text('密码不能为空').show();
                return false
            }
            else if (!code) {
                $('#divMsg').text('验证码不能为空').show();
                return false
            }
            return true
        }
        
        if (validateForm()) { // 校验通过
            $('#divMsg').text('').hide(); // 清空信息
            // 发送ajax请求
            alert('发送ajax');
        }
    })
})


查看完整回答
反对 回复 2017-12-07
  • 慕粉3505864
    慕粉3505864
    谢谢你的回答,我想问多一个我的表单是这样子的: <form name="form1" method="post" action="${pageContext.request.contextPath }/user"> <input type="hidden" name="method" value="login" /> </form> 提交表单 访问我UserServlet.java里面的login()方法,进行登录,我后台已经写好了当登陆失败时候的提示信息:假设登陆失败,执行 resp.getWriter().write("LoginFail"); 然后我们前端页面接收进行显示(responseText)错误信息。 你说表单就不需要再form标签中指定action了 那么我错误的地方应该就在以下这串代码中 $.ajax({ type:"post", url:"${pageContext.request.contextPath }/user?method=login", data:"action=Login&d="+(new Date()).valueOf()+"&name="+name+"&pass="+pass+"&code"+code, 我感觉我的url跟data里面写错了,应该如何正确写呢?
  • 慕粉3505864
    慕粉3505864
    谢谢你的回答,我想问多一个我的表单是这样子的: <form name="form1" method="post" action="${pageContext.request.contextPath }/user"> <input type="hidden" name="method" value="login" /> </form> 提交表单 访问我UserServlet.java里面的login()方法,进行登录,我后台已经写好了当登陆失败时候的提示信息:假设登陆失败,执行 resp.getWriter().write("LoginFail"); 然后我们前端页面接收进行显示(responseText)错误信息。 你说表单就不需要再form标签中指定action了 那么我错误的地方应该就在以下这串代码中 $.ajax({ type:"post", url:"${pageContext.request.contextPath }/user? method=login", data:"action=Login&d="+(new Date()).valueOf()+"&name="+name+"&pass="+pass+"&code"+code, ​我感觉我的url跟data里面写错了,应该如何正确写呢?
  • 慕粉3505864
    慕粉3505864
    有些乱,你看上面我添加答案,里面的提问,谢谢
  • 1 回答
  • 0 关注
  • 2668 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信