$.ajax和java后台实现用户登录的功能

$.ajax代码:

<script src="../js/jquery.mobile-1.4.5.min.js"></script>
<script language="javascript">
function login(loginform){//传入表单参数
    if(loginform.username.value==""){       //验证用户名是否为空
        alert("请输入用户名!");loginform.username.focus();return false;
    }
    if(loginform.password.value==""){       //验证密码是否为空
        alert("请输入密码!");loginform.password.focus();return false;
    }   
    var param="/wechat/UserServlet?action=login&username="+loginform.username.value+"&password="+loginform.password.value;  //将登录信息连接成字符串,作为发送请求的参数
    $.ajax({
        url:param,
        type:"POST",
        dataType:"json",
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',//防止乱码
        success:function(data){
            if(data == false){
                alert("您输入的用户名或密码有错!");loginform.username.focus();return false;
            }else{
                window.location.href = "index.html";//跳转到主页
            }
        }
    });
}
</script>

html代码:

<!DOCTYPE html>
<html>
<head>
    <title>登陆测试</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" >
    <meta name="renderer" content="webkit|ie-stand|ie-comp" />  
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
<style>
a{margin:right;}
</style>
</head>
<body>
<div data-role="page" id="pageone" data-theme="a">
  <div data-role="header">
    <h1 style="font-family:'宋体',Arial, Helvetica, sans-serif;">测试登陆</h1>
  </div>
  <div data-role="main" class="ui-content">
    <div class="ui-field-contain">
        <form name="loginform" method="POST" id="loginform" action="">
            <div class="ui-field-contain">
                <input  autocomplete="off" type="text" name="username" placeholder="用户名" data-rule="empty" data-name="帐号">
            </div><br>
            <div class="ui-field-contain">
                <input autocomplete="off" type="password" name="password" placeholder="密码" data-rule="empty" data-name="密码">
            </div><br>
            <div class="ui-field-contain" align="right">
                <a href="register.html" rel="external" float="right">没有帐号,立即注册</a>
            </div>
            <div class="ui-field-contain">
                <input type="submit" class="submit-btn" id="J_submit" value="登 录" onClick="login(this.form)">
            </div>
        </form>                         
    </div>
  </div>
</div>
</body>
</html>

java后台代码:

你需要新建一个servlet类,然后复写dopost和doget

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);//如果提交方式为GET,跳转到dopost执行
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String action = request.getParameter("action");//获取操作
        if("login".equals(action)){//用户登陆
            this.login(request, response);
        }
    }
//用户登录
    private void login(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
        User f = new User();//这里我写了一个实体类,可以不用实体类,直接付给调用的函数参数即可
        request.setCharacterEncoding("UTF-8");//防止乱码
        f.setusername(request.getParameter("username"));
        f.setpassword(request.getParameter("password"));
        int r = userdao.login(f);//userdao是UserDao类的实例,在servlet的一开始生成
        //r是返回的用户id,根据你自己生成的id,修改下方if判断条件
        boolean flag = false;//默认登录不成功
        if(r >= 0){//用户登陆成功
            HttpSession session = request.getSession();
            session.setAttribute("username", f.getusername());
            session.setAttribute("userid", r);
            session.setAttribute("identify", f.getidentify());
            flag = true;
        }else{
            flag = false;
        }
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.print(flag);//返回登录信息
        out.flush();
        out.close();
    }

UserDao类的login()函数实现:

public int login(User user){
        int flag = -1;//flag的错误值可以随意赋,但是你要保证错误值不和你生成的id有交集
        //flag错误值也可以表示多种错误,你可以在网页的js处理并展示
        String sql = "SELECT * FROM User WHERE UserName='"+user.getusername()+"'";
        ResultSet rs = conn.executeQuery(sql);//conn是连接数据库类的实例,这里不赘述
        try{
            if(rs.next()){
                String pwd = user.getpassword();
                int userid = rs.getInt(1);
                if(pwd.equals(rs.getString(3))){
                    user.setidentify(rs.getInt(9));
                    flag = userid;
                    rs.last();
                    int rowSum = rs.getRow();
                    rs.first();
                    if(rowSum != 1){
                        flag = -2;
                    }
                }else{
                    flag = -1;
                }
            }else{
                flag = -1;
            }
        }catch(SQLException se){
            se.printStackTrace();
            flag = -2;
        }finally{
            conn.close();
        }
        return flag;
    }

了解

代码中都有注释,但是为了防止有些人看不懂,或者说是初次尝试,我还是在这里做个详细说明。(我也是初次使用)

网上有的代码都不是特别的详尽,大多告诉你ajax的格式,但没给详细的例子。我这里给出我写出来的例子,希望可以有助于初学者的理解。

  1. 首先,你需要写个html网页,能展示出登录的页面就算是完成第一步了。

  2. 然后,你需要将你写的网页数据提交到服务器,并且完成跳转和提示信息等操作,就需要利用js了。jquery提供了ajax函数,你可以利用它来实现与服务器的异步通信。代码如上。

  3. 其次,你在写好ajax之后,需要在后台写个处理函数,将网页传过来的数据处理,然后返回它需要的信息。首先,你要知道执行那个函数,就需要从action中获取网页提交的参数,比如说,这是个登录界面,我的action就可以这样写

    aciton=login

    然后后台获取action,比较之后,跳转到你写好的处理函数。

  4. 处理函数就不多说了,获取url给的参数,然后利用sql语句,从数据库中查询比较,之后就blabla。代码如上。

  5. 数据库处理我有时间再写。

新手学习,仅供参考。

如果你有任何问题,可以在下方留言,我一定解答。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页