JavaWeb之Ajax-Servlet-JDBC前后端连接

最新推荐文章于 2022-05-31 00:50:04 发布

Ducker561

最新推荐文章于 2022-05-31 00:50:04 发布

阅读量379

点赞数

文章标签： ajax java javaweb javascript servlet

本文链接：https://blog.csdn.net/Arika_Zhao/article/details/120006045

版权

JavaWeb之Ajax-Servlet-JDBC前后端连接

实例：登录界面的实现

基本逻辑：
在网页端获取用户输入的用户名和密码；
通过Ajax传输到Servlet；
Servlet通过调用DAO访问数据库进行查询；
查询到了返回成功信息给前端进行跳转。

前端JS代码编写-1

在前端HTML里面的登录按钮上设置一个事件，比如οnclick=“login()”
然后我们来看看编写的login函数

<!-- 导入jquery -->
<script src="./js/jquery-3.3.1.min.js" ></script>

    function login(){
        var uid=$('#uid').val();
        var pwd=$('#pwd').val();

在这段代码里面，我们先获取id="uid"的值赋给login里的uid，把id="pwd"的值赋给login里的pwd，做好准备工作。

$.ajax({
     type:'post',
     url:'http://'+location.host+'/testWork_war_exploded/Servlet?type=login&uid='+uid+'&pwd='+pwd,

这段代码中使用了Ajax语法，将获得的账号、密码信息通过post方式传给Servlet。

Servlet代码编写-1

Servlet先接收到ajax传输过来的值。

@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");

        String type = request.getParameter("type");
        if ("login".equals(type)) {
            login(request, response);
        }else if("register".equals(type)){
            register(request,response);
        }
    }

为了提供更多的功能，我们这里先对传输过来的信息(type)进行了分类，再调用这里的login方法。
在这之前，我们先建立一个DAO对象，方便传值。

	LoginDAO ld= new LoginDAO();

protected void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String uid=request.getParameter("uid");
        String pwd=request.getParameter("pwd");
        int ifLogin=ld.ifRegister(uid,pwd);

经过这一步，我们相当于已经将uid和pwd的值“传入”了DAO。

那么DAO有什么用呢？

DAO就是接收这些值调用数据库工具对数据库进行操作。
我们可以看一看LoginDAO当中的ifRegister函数：

public int ifRegister(String uid, String pwd) {
        int result = 0;
        ArrayList<User> users = new ArrayList<>();
        try {
            String sql = "SELECT * FROM user WHERE uid=? and pwd=md5(?)";
            Connection con = DBUtil.getCon();
            ResultSet rs = DBUtil.query(con, sql, uid, pwd);
            while (rs.next()) { //从头到尾逐行移动指针
                //每查询一行，封装为一个User对象
                User usr = new User();
                //封装数据:从表中转换为对象
                usr.setUid(rs.getString(1));
                usr.setPwd(rs.getString(2));
                users.add(usr);
                if (!users.isEmpty()) result = 1;
            }


        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }

我们可以看到，其中有SQL语句对数据库中信息进行查询。

不过这里我们使用了数据库工具DBUtil，我们查看一下DBUtil中的代码：

public static Connection getCon() throws Exception{
        String url="jdbc:mysql://localhost:3306/java_project?useUnicode=true&amp;characterEncoding=UTF-8";

        Connection con= DriverManager.getConnection(url,"root","root");
        return con;
    }

↑这个函数是为了使用jdbc和数据库进行连接。

public static ResultSet query(Connection con,String sql, Object... args) throws Exception{

        PreparedStatement pst=con.prepareStatement(sql);
        for(int i=0;i<args.length;i++){
            pst.setObject(i+1,args[i]);
        }
        ResultSet rs=pst.executeQuery();
//        con.close();
        return rs;
    }
}

↑这个函数是刚刚我们把传入的数据解析到SQL语句中的“?”处。

所以利用这两个数据库工具，我们将数据库进行了连接，并向数据库中传入了完整的SQL语句。

好了，此时我们就得到了数据库中的信息，封装成User类
注意：User类必须包括传入值为空的构造函数和所有getter和setter
把数据库中的信息一定要对应到User类的信息，rs.getString(ColumnIndex)是get到第n列中的数据(从1开始计数)。

随后，我们进行一次判断，如果users列表里面查询到了有User对象，则返回登录成功，即result=1;如果users列表为空，则返回result=0;

Servlet代码编写-2

刚刚我们写的Servlet代码仅仅是“传入”数据，现在我们要“接收”数据。

		int ifLogin=ld.ifRegister(uid,pwd);
        response.getWriter().print(ifLogin);
    }

这就是紧接着上述Servlet.java中login函数中的剩下部分，这里获取到了DAO中ifRegister的返回值(0或1)赋给ifLogin。
通过response类方法返回给前端。

前端JS代码编写-2

刚刚我们的Servlet已经得到了查询结果，并返回给了前端。
在前端的ajax当中，也有对应的接收方式：

success:function (data) {
                if(data==1){
                    location.href="loginSuccess.html?uid="+escape(uid);
                    sessionStorage.setItem('isLogin', 'true');
                }else{
                    alert("用户名或者密码错误!");
                    document.getElementById('uid').value="";
                    document.getElementById('pwd').value="";
                }
            }
        })
    }