Ajax判断用户名是否存在

C盘战士

已于 2023-05-07 16:08:33 修改

阅读量951

点赞数 4

分类专栏： web 文章标签： ajax javascript 前端

于 2023-05-07 16:04:19 首次发布

本文链接：https://blog.youkuaiyun.com/qq_62078665/article/details/130532778

版权

web 专栏收录该内容

2 篇文章

订阅专栏

该文详细介绍了如何在网页表单中利用jQuery的$.get()方法实现Ajax异步请求，当用户名文本框失去焦点时检查用户名是否已存在于数据库中。通过调用Servlet处理请求，从DAO层查询数据库，并将结果返回给前端，更新提示信息。如果用户名已存在，则显示红色警告信息；否则，显示绿色可用信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过$.get()请求实现在文本框失去焦点是检验姓名是否存在

首先要下载引入jQuery文件

<script type="text/javascript" src="js/jquery-3.6.4.min.js"></script>

下面直接在代码中讲解

jsp代码

<!DOCTYPE html>
<html>
<head>
    <title>注册页面</title>
	<!-- 引入jquery文件 -->
    <script type="text/javascript" src="js/jquery-3.6.4.min.js"></script>
    <script type="text/javascript" charset="utf-8">
		
        //检测用户名是否已经存在于数据库中（使用Ajax检测用户名）
        $(function (){
			
			//获取提示信息框
            const message = document.getElementById('message');
			
            //blur:当元素失去焦点时触发，即当鼠标离开当前文本框时执行该函数
            $("#name").blur(function (){
                var username = document.getElementById("name").value;//获取当前文本框中的信息
				
				// 这里使用的时$.get()请求,其中第一个为请求的地址,而&后面的为请求的差数,将这个差数发送到后端,data是用来接收
				// 从后端传来的反馈
                $.get("AllServlet?tp=chickName&name="+username,function (data){
					
                    //直接在页面写入信息,但更改样式相较麻烦  $("#message").html(data);
                    console.log(data);
                    if(data == 0){
                        message.innerHTML = "该名字已被占用";//向提示框中写入信息
                        message.style.color = "red"
                    }else{
                        message.innerHTML = "该名字可以使用";
                        message.style.color = "green"
                    }
                });
            });
        });
    </script>

</head>
<body>
		<!-- 下面的表单就不都介绍 -->
        <form method="post" name="From" action="AllServlet?tp=logon"
              onsubmit= "return chickPassword() && chickPhone() && rpassword()">


          <!-- onblur 和 onkeyup的区别，前者当失去焦点时运行，后者时时运行函数 -->

            <table>
                <tr>
                    <td>用户名：</td>
<!-- <%--                    required 表示必填项--%> -->
                    <td><input type="text" name="name" id="name"  required></td>
                </tr>

           <!-- placeholder="包含大小写" / 密码框用的提示信息--%> -->
                <tr>
                    <td>密码：</td>
                    <td><input type="password" name="password" id="password" placeholder="大小写字母和数字(长8-16)"
                              onkeyup="chickPassword()" required></td>
                </tr>

                <tr>
                    <td>确认密码：</td>
                    <td><input type="password" placeholder="请再次输入密码" id="repassword" onkeyup="rpassword()" required></td>
                </tr>

                <tr>
                    <td>电话：</td>
                    <td><input type="text" name="phone" id="phone" onkeyup="chickPhone()" required></td>
                </tr>

                <tr>
                    <td>收货地址：</td>
                    <td><input type="text" name="address" required></td>
                </tr>


            </table>

            <center>
                <input type="reset" value="重置">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="submit" value="注册"><br>

                <span id="message">&nbsp;</span>

            </center>
        </form>
    </div>
</body>
</html>

servlet代码

package com.servlet;

import com.dao.UserDao;
import com.it.Users;
import com.util.DBUtil;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

@WebServlet(name = "AllServlet", value = "/AllServlet")
public class AllServlet extends HttpServlet {
    UserDao dao = new UserDao();//与dao建立联系

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           
        //设置字符集
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        String tp = request.getParameter("tp");//tp是用来区分请求的信息

        System.out.println(tp);

        if(tp.equals("chickName")){
            this.chickName(request,response);
        }
        if(tp.equals("login")){
            this.login(request,response);
        }

        if(tp.equals("logon")){
            this.logon(request,response);
        }
    }


   

    protected void chickName(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        //name为前端传进来的参数，获取参数
        String username = request.getParameter("name");

        //System.out.println(username);

        //检测用户名是否存在
        //System.out.println(dao.logon_name(username));//为true代表名字存在

//        //直接在页面写入信息
//        if(dao.logon_name(username)){
//            response.getWriter().println("该名字已被占用");//赋予data相应的值
//        }else response.getWriter().println("该名字可以使用");

        if(dao.logon_name(username)){
            response.getWriter().println(0);//将data设为false
        }else response.getWriter().println(1);
    }


    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

dao代码

package com.dao;

import com.it.Users;
import com.util.DBUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class UserDao {

    //检查名字是否存在
    public boolean logon_name(String userName){//传入用户名
        Connection connection = DBUtil.getConn();//获取数据库信息并建立联系
        PreparedStatement preparedStatement = null;
        ResultSet resultSet = null;

        boolean flg = false;


        try{

            String sql = "select * from users where user_name = ?";//进行查询并匹配数据库中的值
            preparedStatement = connection.prepareStatement(sql);
            preparedStatement.setString(1,userName);

            resultSet = preparedStatement.executeQuery();
            while(resultSet.next()){//遍历结果集
                flg=true;
            }

        }catch (Exception e){
            System.err.println(e.getMessage());
        }

        DBUtil.Closes(connection,preparedStatement,resultSet);//将与数据库的联系关闭

        return flg;
    }

}

DBUtil代码，这是用来与数据库建立联系的，单独写出来方便调用。

package com.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;


public class DBUtil {

    //获取连接对象
    public static Connection getConn(){
        Connection conn = null;
        try {

            try {
                Class.forName("com.mysql.cj.jdbc.Driver");
            }catch (Exception e){
                System.err.println(e.getMessage());
                System.out.println("驱动器加载失败");
            }

            //其中bookstore是数据库的名字
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/bookstore","root","123456");
            
            System.out.println("数据库连接成功");

        }catch (Exception e){
            System.err.println(e.getMessage());
            System.out.println("连接数据库失败");
        }

        return conn;
    }


    //关闭资源
    public static void Closes(Connection connection, PreparedStatement statement, ResultSet resultSet){
        try {
            if(connection != null){
                connection.close();
            }

            if(statement != null){
                statement.close();
            }

            if(resultSet != null){
                resultSet.close();
            }

            System.out.println("数据库关闭成功");

        }catch (Exception e){
            System.out.println("数据库关闭失败");
            System.err.println(e.getMessage());//抛出异常
        }
    }
}

下面具体来讲讲ajax请求

$.ajax

$.ajax({
            url: "http://localhost:8081/getUser", //要请求的后端地址
            type: "GET", //数据发送的方式(POST或者GET)
            data: {val1: "1", val2: "2"}, //需要传递的参数
            dataType: "json", //后端返回的数据格式，有json和text,其中text为字符窜
            success: function (result) {//ajax请求成功后触发的方法
                console.log(result); //result为响应内容
            },
            error: function () {//ajax请求失败后触发的方法
                console.log('Send Request Fail..');
            }
        });

$.get()，post方法和get是一样的，只需将get改为post就可以了

 $.get("AllServlet?tp=chickName&name="+username,function (data){
        
   });


//也有另一种写法是
$.get("AllServlet?tp=chickName"{name:username},function (data){
        
   });