基于AJAX技术,在用户注册时,校验用户名是否在数据已存在数据库中。请给出源代码
时间: 2024-02-29 10:53:05 浏览: 32
以下是基于 AJAX 技术,在用户注册时校验用户名是否已存在的示例代码,仅供参考:
register.html:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#username").blur(function(){
var username = $(this).val();
$.get("check_username.jsp", {"username":username}, function(result){
if(result.isExist){
$("#username-tip").html("该用户名已被注册");
$("#login-btn").attr("disabled", false);
$("#register-btn").attr("disabled", true);
}else{
$("#username-tip").html("该用户名可以使用");
$("#login-btn").attr("disabled", true);
$("#register-btn").attr("disabled", false);
}
}, "json");
});
});
</script>
</head>
<body>
<form>
<label>用户名:</label>
<input type="text" name="username" id="username"/>
<span id="username-tip"></span><br/>
<label>密码:</label>
<input type="password" name="password" id="password"/><br/>
<label>确认密码:</label>
<input type="password" name="confirm-password" id="confirm-password"/><br/>
<button type="submit" id="login-btn" disabled>登录</button>
<button type="submit" id="register-btn" disabled>注册</button>
</form>
</body>
</html>
```
check_username.jsp:
```jsp
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*"%>
<%@ page import="javax.servlet.*,javax.servlet.http.*"%>
<%@ page import="java.sql.*"%>
<%
String username = request.getParameter("username");
boolean isExist = false;
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try{
Class.forName("com.mysql.cj.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/db_name?useSSL=false&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai";
String user = "username";
String password = "password";
conn = DriverManager.getConnection(url, user, password);
String sql = "SELECT * FROM user WHERE username=?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, username);
rs = pstmt.executeQuery();
if(rs.next()){
isExist = true;
}
}catch(Exception e){
e.printStackTrace();
}finally{
try{
if(rs != null){
rs.close();
}
if(pstmt != null){
pstmt.close();
}
if(conn != null){
conn.close();
}
}catch(Exception e){
e.printStackTrace();
}
}
Map<String, Object> resultMap = new HashMap<String, Object>();
resultMap.put("isExist", isExist);
String resultJson = new com.alibaba.fastjson.JSONObject(resultMap).toJSONString();
out.print(resultJson);
%>
```
说明:
- register.html 页面中,使用 jQuery 库实现了用户名输入框失去焦点事件的监听。当输入框失去焦点时,会向后端发送一个 GET 请求,请求地址为 check_username.jsp,携带的参数为用户名。
- check_username.jsp 页面中,接收到请求后,查询数据库中是否已存在该用户名。如果存在,则将 isExist 字段设置为 true,否则为 false,并将结果封装成 JSON 格式返回给前端。
- register.html 页面接收到后端返回的结果后,根据 isExist 字段更新页面提示信息,并设置登录和注册按钮的状态。如果用户名已存在,则启用登录按钮,禁用注册按钮;否则启用注册按钮,禁用登录按钮。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)