Ajax小案例---检测玩家昵称是否重复(失去焦点)
当我们玩一款游戏的时候，最开始就会让我们填一个用户昵称，好不容易想好一个却检测到已经被其他玩家使用，蓝廋啊
这个案例实现的也是检测用户昵称是否重复的问题，是我在学习Ajax的过程中自己写的一个小案例，代码简单，原理也很简单，放在这也算是记录一下学习的过程，可能比较糙，不要介意
效果展示
项目结构
GetInfoServlet.java部分
package getinfoservlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import infohandledao.InfoHandleDao;@WebServlet("/GetInfoServlet")public class GetInfoServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();String username = request.getParameter("input");// 判断用户输入昵称是否为空if (username != null && username.length() != 0) {// 调用InfoHandleDao类中的handle方法boolean result = InfoHandleDao.handle(username);// 根据不同返回结果输出不同语句 ajax会获取到输出的语句if (result == true) {out.print("昵称可用");}else {out.print("昵称已存在，请重新输入");}}else {out.print("请输入昵称");}}}
InfoHandleDao.java部分
package infohandledao;import java.sql.*;import sqlconnect.SqlConnect;public class InfoHandleDao {static private Connection conn = null;static private PreparedStatement pst = null;static private ResultSet rst = null;public static boolean handle(String name) {boolean result = true;try {// 调用SqlConnect类中的connection()方法conn = SqlConnect.connection();// 格式化查询语句pst = conn.prepareStatement("select * from UserName where name = ?");// 查询条件为用户输入的昵称pst.setString(1, name);rst = pst.executeQuery();if (rst.next()) { //判断查询结果是否为空 若不为空 说明昵称已被使用result = false;}else { // 若为空 说明昵称没有被使用result = true;}} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}finally { //关闭资源SqlConnect.unconnection(rst, pst, conn);}return result;}}
SqlConnect.java部分
package sqlconnect;import java.sql.*;public class SqlConnect {static private Connection conn;static private String driver = "com.microsoft.sqlserver.jdbc.SQLServerDriver";static private String url = "jdbc:sqlserver://localhost:1433;DatabaseName=secon";static private String name = "sa";static private String passwd = "sa";public static Connection connection() {try {Class.forName(driver);} catch (ClassNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();}try {conn = DriverManager.getConnection(url,name,passwd);} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}return conn;}public static void unconnection(ResultSet rst,PreparedStatement pst,Connection conn) {if (rst != null) {try {rst.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}if (pst != null) {try {pst.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}if (conn != null) {try {conn.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}}}
index.jsp部分
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><input type="text" id="in" onblur="ajaxdo()"> <span id="out" style="color:red"></span><script type="text/javascript">function ajaxdo() {//创建异步对象var xhr = new XMLHttpRequest;//绑定事件xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){var result = xhr.responseText;//将结果显示到网页//根据结果的不同 更改显示字体的颜色if(result == "昵称已存在，请重新输入" | result == "请输入昵称"){document.getElementById("out").style.color = "red";document.getElementById("out").innerText = result;}else{document.getElementById("out").style.color = "green";document.getElementById("out").innerText = result;}}}//获取用户输入的数据var input = document.getElementById("in").value;//初始化异步对象xhr.open("get","GetInfoServlet?input=" + input,true);//发送请求xhr.send();}</script></body></html>
数据库表结构