自学内容网 自学内容网

基础实践:使用JQuery Ajax调用Servlet

前言

本博客介绍最简单的JQuery(原生JS的封装库)使用Ajax发送请求,并通过对应的servlet响应数据,并在页面显示,并且servlet响应的数据来自MySQL数据库。

实现需求:在前端页面的输入框中输入要注册的用户名,动态查询数据库中指定用户名是否存在,若存在给出提示,若不存在也给出相应提示。

项目结构

 数据库的SQL支持

本项目使用原生的JDBC连接MySQL数据库,并进行操作,为了简化开发,封装了操作JDBC的工具类

数据库表

这个数据库表,是我沿用以前存在的项目中的表,实际上如果创建一个符合当前项目的用户表只需要保留基本字段user_id(用户id,唯一标识),user_name(用户名)

 本来应该创建一个实体类与数据库表相对应,但是现在省略了,因为只是演示简单字符串对比,不需要拿实体类接收数据库传回的数据。

导入JDBC工具类,并书写DAO层

DBUtil

连接自己的数据库

package dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;

public class DBUtil {
    private final static String DRIVER="com.mysql.cj.jdbc.Driver";
    private final static String URL="jdbc:mysql://localhost:3306/csx_demo?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=UTF-8&zeroDateTimeBehavior=convertToNull";
    private final static String DBNAME="root";
    private final static String DBPASS="root";

    public static Connection getConn(){
        Connection conn=null;
        try {
            Class.forName(DRIVER);
            conn= DriverManager.getConnection(URL,DBNAME,DBPASS);
        }catch (Exception e){
            e.printStackTrace();
        }
        return conn;
    }


    public static void closeAll(Connection conn, Statement st, ResultSet rs){
        try {
            if (rs!=null){
                rs.close();
            }
            if (st!=null){
                st.close();
            }
            if (conn!=null){
                conn.close();
            }

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

    }

}

UserDao

package dao;

public interface UserDao {

    boolean checkUserName(String username);
}

UserDaoImpl

判断用户名是否存在,若存在返回true,不存在返回false

package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class UseDaoImpl extends DBUtil implements UserDao{
    Connection conn=null;
    PreparedStatement pstmt=null;
    ResultSet rs=null;


    @Override
    public boolean checkUserName(String username) {
        conn=getConn();
        boolean flag=false;
        try {
            String sql="select user_name from t_user where user_name = ?";
            pstmt=conn.prepareStatement(sql);
            pstmt.setString(1,username);
            rs=pstmt.executeQuery();
            if (rs.next()){
                flag=true;
            }


        } catch (SQLException e) {
            throw new RuntimeException(e);
        }

        return flag;
    }
}

创建过滤器,保证编解码字符集保持一致

EncodingFilter

将所有请求拦截下来,设置统一字符集(UTF-8)

package filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;

@WebFilter("/*")
public class EncodingFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        servletRequest.setCharacterEncoding("UTF-8");
        servletResponse.setCharacterEncoding("UTF-8");

        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

创建前端页面,使用JQuery发生Ajax请求给servlet

reg.html

  • type:指定请求的方式为post
  • url:请求的servlet路径
  • data:传入servlet的参数
  • msg:代表servlet响应的数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<body>

<body>
注册账号: <input type="text" id="username" name="username"> <span id="usermsg"></span>
</body>
<script>
    $(function(){
        $("#username").blur(function(){
            $.ajax({
                type:'POST',
                url:'/checkName',
                data:{
                    username:$("#username").val()
                },
                success:function(msg){
                    if(msg=="true"){
                        $("#usermsg").html("用户名已占用").css("color","red");
                    }else{
                        $("#usermsg").html("用户名可以使用").css("color","green");
                    }
                }
            });

        });
    })


</script>

</body>
</html>

创建Servlet获取页面发送的参数,并响应

CheckNameServlet

注意:因为前端页面和后端的java的数据类型并不是通用的,因此需要将数据转换成字符串类型进行传递;servlet通过PrintWriter将数据返回给页面的msg

package servlet;



import dao.UseDaoImpl;
import dao.UserDao;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/checkName")
public class CheckNameServlet  extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username= request.getParameter("username");
        UserDao userDao=new UseDaoImpl();
        boolean result= userDao.checkUserName(username);

        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out= response.getWriter();

        if (result){
            response.setContentType("text/html;charset=UTF-8");
            out= response.getWriter();
            out.print("true");
        }else{
            out.print("false");
        }
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }
}

项目演示效果

reg.html页面

如果账号存在:

如果账号不存在:


原文地址:https://blog.csdn.net/weixin_52937170/article/details/142370085

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!