基于AJAX技术,在用户注册时,校验用户名是否在数据已存在数据库中。请给出源代码

时间: 2024-02-29 20:53:05 浏览: 26
以下是基于 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 字段更新页面提示信息,并设置登录和注册按钮的状态。如果用户名已存在,则启用登录按钮,禁用注册按钮;否则启用注册按钮,禁用登录按钮。

相关推荐

最新推荐

recommend-type

ajax动态获取数据库中的数据方法

今天看到有人在问答上问怎样去动态取值附在option上,本来想解决的,但我发现。。。。没有,我本来也笨,记不住,所以还是写一下,让大家可以看一下: 首先我这用的框架是SSM,代码就开始了: 这是写在前台的方法里...
recommend-type

ajax接收后台数据在html页面显示

本篇文章主要介绍了ajax接收后台数据在html页面显示的方法,具有很好的参考价值,下面跟着小编一起来看下吧
recommend-type

ThinkPHP中使用ajax接收json数据的方法

主要介绍了ThinkPHP中使用ajax接收json数据的方法,包括了前台js代码与对应的PHP处理代码,非常具有实用价值,需要的朋友可以参考下
recommend-type

jQuery Ajax 实现在html页面实时显示用户登录状态

本文给大家分享jQuery Ajax 实现在html页面实时显示用户登录状态的实现方法,非常不错,具有参考借鉴价值,需要的朋友参考下
recommend-type

AJAX实现数据的增删改查操作详解【java后台】

主要介绍了AJAX实现数据的增删改查操作,结合实例形式详细分析了ajax结合java后台实现数据库增删改查相关操作技巧,需要的朋友可以参考下
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

深入了解MATLAB开根号的最新研究和应用:获取开根号领域的最新动态

![matlab开根号](https://www.mathworks.com/discovery/image-segmentation/_jcr_content/mainParsys3/discoverysubsection_1185333930/mainParsys3/image_copy.adapt.full.medium.jpg/1712813808277.jpg) # 1. MATLAB开根号的理论基础 开根号运算在数学和科学计算中无处不在。在MATLAB中,开根号可以通过多种函数实现,包括`sqrt()`和`nthroot()`。`sqrt()`函数用于计算正实数的平方根,而`nt
recommend-type

react的函数组件的使用

React 的函数组件是一种简单的组件类型,用于定义无状态或者只读组件。 它们通常接受一个 props 对象作为参数并返回一个 React 元素。 函数组件的优点是代码简洁、易于测试和重用,并且它们使 React 应用程序的性能更加出色。 您可以使用函数组件来呈现简单的 UI 组件,例如按钮、菜单、标签或其他部件。 您还可以将它们与 React 中的其他组件类型(如类组件或 Hooks)结合使用,以实现更复杂的 UI 交互和功能。
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。