Ajax校验用户名是否可用
2024-10-08 16:43:00
准备
- 导包:DBUtil,JDBC,C3P0
- 在src下导入c3p0-config.xml
- 导入JDBCUtil
- 创建数据库
第2.3.条查看https://blog.csdn.net/weixin_44718300/article/details/88994973
1、新建JSP页面
<body>
<table border="1" width="500">
<tr>
<td>用户名:</td>
<td><input type="text" name="name" id="name" οnblur="checkUserName()"><span id="span01"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>简介</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</body>
2、创建Servlet
public class CheckUserNameServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
request.setCharacterEncoding("UTF-8");
//1. 检测是否存在
String name = request.getParameter("name");
System.out.println("name="+name);
UserDao dao = new UserDaomImpl();
boolean isExist = dao.checkUserName(name);
//2. 通知页面,到底有还是没有。
if(isExist){
response.getWriter().println(1); //存在用户名
}else{
response.getWriter().println(2); //不存在该用户名
}
} catch (SQLException e) {
e.printStackTrace();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
3、Dao
boolean checkUserName(String username) throws SQLException;
@Override
public boolean checkUserName(String username) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
String sql = "select count(*) from t_user where username =?";
runner.query(sql, new ScalarHandler(), username);
Long result = (Long) runner.query(sql, new ScalarHandler(), username);
return result > 0 ;
}
4、修改jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1. 创建对象
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
function checkUserName() {
//获取输入框的值 document 整个网页
var name = document.getElementById("name").value; // value value() val val()
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open("POST" ,"/day16/CheckUserNameServlet" , true );
//注册状态改变监听,获取服务器传送过来的数据
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
//alert(request.responseText);
var data = request.responseText;
if(data == 1){
//alert("用户名已存在");
document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
}else{
document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
//alert("用户名未存在");
}
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name="+name);
}
</script>
</head>
<body>
<body>
<table border="1" width="500">
<tr>
<td>用户名:</td>
<td><input type="text" name="name" id="name" οnblur="checkUserName()"><span id="span01"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>简介</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</body>
</html>
最新文章
- 【leetcode】Palindrome Number
- SilverLight CheckBox 控件 DataContext属性与DataContextChanged事件
- GCD一些常用的方法
- Spark BlockManager的通信及内存占用分析(源码阅读九)
- 算法实质【Matrix67】
- js 返回上一页
- js问题集锦
- 帝国cms数据还原后提示数据库表不存在怎么解决?
- 为什么dubbo使用ZkClient作为zookeeper的客户端
- oracle 库文件解决的方法 bad ELF interpreter: No such file or directory
- 用CSS3绘制图形
- Maven的声明周期(Lifecycle )和命令(Phase)
- Composer 安装(一)
- HDU-2222文字检索
- c#下winform的ftp上传
- Kubernetes — 我的第一个容器化应用
- python基础6--面向对象基础、装饰器
- React Native之常用组件(View)
- jquery发起get/post请求_或_获取html页面数据
- A1140. Look-and-say Sequence
热门文章
- numpy高级函数:where与extract
- Eclipse创建一个普通maven项目详细步骤
- SciPy 图像处理
- docker-compose 快速部署Prometheus之服务端并监控ceph cluster 使用钉钉webhook 报警
- delphi环境变量
- SQLyog连接报错 Error No.2058 Plugin caching_sha2_password could not be loaded
- 041、Java中逻辑运算之普通或运算“|”
- 中兴获25个5G商用合同
- 小米手机收到升级鸿蒙OS提示?官方回应
- git仓库拆分