基础实践：使用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;@Overridepublic 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 {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {servletRequest.setCharacterEncoding("UTF-8");servletResponse.setCharacterEncoding("UTF-8");filterChain.doFilter(servletRequest, servletResponse);}@Overridepublic 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 {@Overrideprotected 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");}}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}
}