0
点赞
收藏
分享

微信扫一扫

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

承蒙不弃 2024-09-26 阅读 18

前言

项目结构

 数据库的SQL支持

数据库表

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

导入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

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

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

<!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

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页面

如果账号存在:

如果账号不存在:

举报

相关推荐

0 条评论