用户登录4.0（servlet+jsp+AJAX）

王宇辉

于 2022-03-01 07:57:03 发布

阅读量832

点赞数 1

分类专栏： java知识体系文章标签： ajax java 前端

本文链接：https://blog.csdn.net/weixin_42688085/article/details/123196596

版权

本文介绍了一个基于servlet+jsp+AJAX的用户登录4.0版本，通过AJAX实现了用户名有效性验证和数据自动填充。详细介绍了从数据库设计、工具类编写、对象创建、前端页面构建到服务端数据处理的全过程，并提供了完整代码。

摘要由CSDN通过智能技术生成

写再前面的话

1，本文为Java学习五部分第二部分所有项目回顾（前端练习系列-对应Java体系第二部分第三阶段内容）这些再前面的博客里没有。因为感觉把练习作业单独写出来会更好一些。
2，整体项目系列博客（包括整体快递e站系列，数据库练习系列，程序创新大会报名表系列，Javaweb系列(用户登录，快递e站)，SSM系列，微服务系列，实战系列，等）还是应该刚写完作业就写博客的。本部分借鉴了作者SelcouthAI写博客的结构。

具体需求

再之前的用户登录模块中加入：
1.AJAX 实现用户名有效性验证
2.AJAX 实现用户数据的自动填充

任务过程

无

任务成功视频

后台不能上传视频，额。补一下截图。
AJAX 实现用户名有效性验证
在这里插入图片描述
AJAX 实现用户数据的自动填充

思路及代码实现

以用户登录3.0（servlet+jsp+Filter和Listener）为基础进行分析。

一，创建数据库

和之前相比，新增了两个属性。年龄和性别。新建了一个数据表
在这里插入图片描述

二，编写工具类

去掉了过滤器和监听器的工具类。
properties配置文件如下：

url=jdbc:mysql://localhost:3306/test?serverTimezone=UTC
username=cms
password=cms
driverClassName=com.mysql.cj.jdbc.Driver

更换了DBUtils工具类，其内容如下
1.定义变量

private Connection connection;
private PreparedStatement pps;
public ResultSet resultSet;// 存储查询结果
private int count;// 存储增删改结果

private static String userName;
private static String userPass;
private static String url;
private static String driverName;
private static DruidDataSource dataSource = new DruidDataSource();

2.加载驱动

 static {
   
        ResourceBundle bundle = ResourceBundle.getBundle("druid");
        driverName = bundle.getString("driverClassName");
        url = bundle.getString("url");
        userName = bundle.getString("username");
        userPass = bundle.getString("password");

        // 德鲁伊连接池
        dataSource.setUsername(userName);
        dataSource.setPassword(userPass);
        dataSource.setUrl(url);
        dataSource.setDriverClassName(driverName);
    }

3.获得连接

 protected Connection getConnection(){
   
        try {
   
            connection = dataSource.getConnection();
        } catch (SQLException throwables) {
   
            throwables.printStackTrace();
        }
        return connection;
    }

4.获得预状态通道

 protected PreparedStatement getPps(String sql){
   
        try {
   
            pps = getConnection().prepareStatement(sql);
        } catch (SQLException e) {
   
            e.printStackTrace();
        }
         return pps;
    }

5.绑定参数 LIST保存的是给占位符所赋的值

   protected void param(List list){
   
        if (list!=null&&list.size()>0){
   
            for (int i = 0; i < list.size(); i++) {
   
                try {
   
                    pps.setObject(i+1, list.get(i));
                } catch (SQLException e) {
   
                    e.printStackTrace();
                }
            }
        }
    }

6.执行操作(增删改+查)

protected int update(String sql,List list){
   
    getPps(sql);
    param(list);
    try {
   
        count = pps.executeUpdate();
    } catch (SQLException e) {
   
        e.printStackTrace();
    }
    return count;
}

7.查询

protected ResultSet query(String sql,List list){
   
    getPps(sql);
    param(list);
    try {
   
         resultSet = pps.executeQuery();
    } catch (SQLException e) {
   
        e.printStackTrace();
    }
    return resultSet;
}

8.关闭资源

protected void closeAll(){
   
    try {
   
        if (connection != null){
   
            connection.close();
        }
        if(pps != null){
   
            pps.close();
        }
       if(resultSet != null){
   
           resultSet.close();
       }
    } catch (SQLException e) {
   
        e.printStackTrace();
    }
}

三、对象

创建一个beam包，新建类Student1.Student1类对应的数据表Student1，类属性名 = 表字段名
Student1
属性：

private Integer stuid;
private String stuname;
private String stupassword;
private Integer age;
private Integer sex;

用setter和getter设置和获取值：

public String getStupassword() {
   
    return stupassword;
}

public void setStupassword(String stupassword) {
   
    this.stupassword = stupassword;
}

public Integer getStuid() {
   
    return stuid;
}

public void setStuid(Integer stuid) {
   
    this.stuid = stuid;
}

public String getStuname() {
   
    return stuname;
}

public void setStuname(String stuname) {
   
    this.stuname = stuname;
}

public Integer getAge() {
   
    return age;
}

public void setAge(Integer age) {
   
    this.age = age;
}

public Integer getSex() {
   
    return sex;
}

public void setSex(Integer sex) {
   
    this.sex = sex;
}

无参和全参构造方法：

public Student1(Integer stuid, String stuname, String stupassword, Integer age, Integer sex) {
   
    this.stuid = stuid;
    this.stuname = stuname;
    this.stupassword = stupassword;
    this.age = age;
    this.sex = sex;
}

public Student1() {
   
}

override toString()方法：

@Override
public String toString() {
   
    return "Student{" +
            "stuid=" + stuid +
            ", stuname='" + stuname + '\'' +
            ", stupassword='" + stupassword + '\'' +
            ", age=" + age +
            ", sex=" + sex +
            '}';
}

四、登录注册页面

登录页面无变化
注册页面加上了用户名有效性验证

<script type="text/javascript">
    $(function(){
     
        $("#username").blur(function(){
     
            //1.获得value值
            var username = $(this).val();
            $.post("testuname","username="+username,function(rs){
     
                $("#rs").html(rs);
            });

        });
    })
</script>

五，服务端接受客户端数据

web.xml里的配置文件又取消了。
登录失败直接跳转到登录页面了。
鉴于新增加的两个功能，servlet增加了两个类
GetUsersServlet:通过用户Id获取用户信息。

//1.接收参数
String uid = req.getParameter("stuid");
System.out.println(uid);
Integer id = Integer.parseInt(uid);
System.out.println(id);
//4.调用UserDao的login3方法
RwDaoImpl dao = new RwDaoImpl();
Student1 user = dao.login3(id);

System.out.println(user); // 检验一下login3方法

//java->json
JSONObject jsonObject = JSONObject.fromObject(user);//json
resp.setContentType("text/html;charset=utf-8");
PrintWriter writer = resp.getWriter();
writer.print(jsonObject);

TestServlet：判断用户名是否可以注册

RwDaoImpl dao = new RwDaoImpl();
resp.setContentType("text/html;charset=utf-8");
PrintWriter writer = resp.getWriter();

//2.获取请求参数
String username = req.getParameter("username");
Student1 a= dao.login2(username);
String b = a.getStupassword();
// 进行用户名判断
if(b == null){
   
    writer.println("该账户可以注册");
}else{
   
    writer.println("该用户名已存在");
}

六，数据处理

因为新增加两个类，所以后台新增加两个方法。因为新换了一个工具类，所以，具体的实现方法也要改一下。RwDaoImpl extends DBUtils1 implements Rwdao
抽象类新增加方法

// 查询登录用户（单用户）
public Student1 login2(String login_student2);

// 查询用户（单id）
public Student1 login3(int stuid);

实现类新增加方法

//查询用户
@Override
public Student1 login2(String login_student2) {
   
    Student1 student = new Student1();
    try {
   
        String sql="select * from student1 where stuname = ? ";
        List params=new ArrayList();
        params.add(login_student2);
        resultSet=query(sql,params);
        while(resultSet.next()){
   
            student.setStuname