新增删除功能后原有注册功能失效且无控制台报错问题排查

新增用户删除功能后，原本正常的用户注册功能失效，前后端控制台均无报错信息，删除功能可正常使用。

后端Repository层代码 #

@Autowired
private DataSource ds;
public void add(User s) {
    try{
        Connection cn=ds.getConnection();
        PreparedStatement ps=cn.prepareStatement("insert into users (username,password,birthdate) values (?,?,?);");
        ps.setString(1, s.getUsername());
        ps.setString(2, s.getPassword());
        ps.setDate(3, Date.valueOf(s.getBirthdate()));
        ps.executeUpdate();
        ps.close();
        cn.close();
    } catch (Exception e){
        e.printStackTrace();
    }
}
public List<User> getAll(){
    List<User> list=new ArrayList<>();
    try{
        Connection cn=ds.getConnection();
        PreparedStatement ps=cn.prepareStatement("select * from users");
        ResultSet rs=ps.executeQuery();
        while(rs.next()){
            User s =new User();
            s.setId(rs.getInt("id"));
            s.setUsername(rs.getString("username"));
            s.setPassword(rs.getString("password"));
            s.setBirthdate(rs.getDate("birthdate").toLocalDate());
            list.add(s);
        }
        rs.close();
        ps.close();
        cn.close();
    } catch(Exception e){
        e.printStackTrace();
    }
    return list;
}
public void deleteById(Integer id) {
    try{
        Connection cn=ds.getConnection();
        PreparedStatement ps=cn.prepareStatement("delete from users where id=?;");
       ps.setInt(1, id);
        ps.executeUpdate();
        ps.close();
        cn.close();
    } catch (Exception e){
        e.printStackTrace();
    }
}

REST Controller层代码 #

@Autowired
private UserRepository userrepository;
@PostMapping
public void add(@RequestBody User s){
    userrepository.add(s);
}
@GetMapping
public List<User> getAll(){
    return userrepository.getAll();
}
@DeleteMapping(path="/{id}")
public void deleteById(@PathVariable Integer id){
    userrepository.deleteById(id);
}

前端代码 #

注册功能JS逻辑 #

var userNameInput=document.getElementById('uname');
var passwordInput=document.getElementById('pwd');
var bdateInput=document.getElementById('bdate');

function onRegister(event){
    event.preventDefault();
    
    var user={};
    var username=userNameInput.value;
    var password=passwordInput.value;
    var birthdate=bdateInput.value;

    user.username=username;
    user.password=password;
    user.birthdate=birthdate;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200){
            alert('hehehe');
        };
    xhttp.open("POST", "http://localhost:8279/users", true);
    xhttp.setRequestHeader("Content-type","application/json");
    xhttp.send(JSON.stringify(user));
}

注册页HTML代码 #

<!DOCTYPE html>
   <html>
       <head>
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.5/umd/popper.min.js" integrity="sha512-8cU710tp3iH9RniUh6fq5zJsGnjLzOWLWdZqBMLtqaoZUA6AWIE34lwMB3ipUNiTBP5jEZKY95SfbNnQ8cCKvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
     <body>
        <nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/home">
              <img src="download.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"/> </a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav"> 
                  <li class="nav-item">
                    <a class="nav-link" href="register.html">Sign Up</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Categories</a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="trgames.html">User List</a></li>
                      <li><a class="dropdown-item" href="#">Most Popular</a></li>
                      <li><a class="dropdown-item" href="#">Most Downloads</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
          </div>
        </nav>     
        <div  style="width:600px; margin-left : 50px;" class="container-fluid mt-3 float-start">
          <h1>Register Form</h1>
          <p>Try to fill the form.</p>
            
          <form  class="was-validated" onsubmit="onRegister(event)">
            <div class="mb-3 mt-3">
              <label for="uname" class="form-label">Username:</label>
              <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>
            <div class="mb-3">
              <label for="pwd" class="form-label">Password:</label>
              <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>
            <div class="mb-3">
              <label for="bdate" class="form-label">Birth Date:</label>
              <input type="date" class="form-control" id="bdate" name="bdate"  required>
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>
            

          <button id="butn" type="submit" class="btn btn-success">Submit</button>
          </form>

      

        <script src="js/register.js"></script>
    </body>
   </html>

注册功能失效的核心问题在前端JS代码的括号位置错误：

• xhttp.open()、xhttp.setRequestHeader()、xhttp.send() 三个核心的请求发送逻辑，被错误地包裹在了 onreadystatechange 回调函数内部
• onreadystatechange 只有在请求状态发生变化时才会触发，没有执行open、send操作发起请求的前提下，回调永远不会执行，相当于点击提交按钮后根本没有向后端发送注册请求，后端自然不会收到数据、也不会有任何报错。
• 删除功能不受影响是因为删除逻辑的代码没有被改动，请求可以正常发送。

额外隐患：后端JDBC操作的资源关闭逻辑写在try块内部，只要SQL执行抛出异常，就不会执行close()方法释放数据库连接，长期运行会导致连接池耗尽，建议改用try-with-resources语法自动释放资源。

调整JS代码的括号位置，把请求发送逻辑移到onreadystatechange回调外部，修正后的代码如下：

var userNameInput=document.getElementById('uname');
var passwordInput=document.getElementById('pwd');
var bdateInput=document.getElementById('bdate');

function onRegister(event){
    event.preventDefault();
    
    var user={};
    var username=userNameInput.value;
    var password=passwordInput.value;
    var birthdate=bdateInput.value;

    user.username=username;
    user.password=password;
    user.birthdate=birthdate;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200){
            alert('注册成功');
        }
    };
    // 请求发送逻辑移到回调函数外部
    xhttp.open("POST", "http://localhost:8279/users", true);
    xhttp.setRequestHeader("Content-type","application/json");
    xhttp.send(JSON.stringify(user));
}

替换原有JS代码后，注册请求即可正常发送到后端，功能恢复。

内容的提问来源于stack exchange，提问作者Zombotan