Ajax技术判断输入的用户名是否存

Ajax技术判断输入的用户名是否存


1,新建一个数据库(这里用的是MySQL)

在表中添加几条数据
数据库

2,JDBC连接数据库详细

在uitl包里Tool.java

    package com.wxy.util;

/**
 * Created by WXY on 2018/12/13 0013 上午 8:30
 */

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

/**
 * 数据库操作
 */
public class Tool {

    /**
     * 获取数据库连接
     * @return 数据库对象
     */
    public static Connection getConnection(){
        Connection conn=null;
        try {
            //加载MySql数据库驱动
            Class.forName("com.mysql.jdbc.Driver");
            String url="JDBC:Mysql://localhost:3306/layui?useUnicode=true&characterEncoding=UTF-8";
            String username="root";
            String password="wxy";
            conn = DriverManager.getConnection(url, username, password);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return  conn;
    }


    /**
     * 关闭数据库连接
     * @param conn 数据库对象
     * @param ps
     */
    public static void close(Connection conn, PreparedStatement ps){
        if (conn!=null){
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (ps!=null){
            try {
                ps.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

3,创建实体类

在bean包里User.java

    package com.wxy.bean;

/**
 * Created by WXY on 2018/12/13 0013 上午 8:35
 */
public class User {

    private int id;
    private String useranme;
    private String password;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUseranme() {
        return useranme;
    }

    public void setUseranme(String useranme) {
        this.useranme = useranme;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

4,在dao层中和数据库交互

在dao包中UserDao.java

    package com.wxy.dao;

import com.wxy.bean.User;
import com.wxy.util.Tool;

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

/**
 * Created by WXY on 2018/12/13 0013 上午 8:52
 */
public class UserDao {

    /**
     * 根据用户名查询用户是否存在
     * @param username 用户名
     * @return 用户对象
     */
    public User QueryUser(String username){
        PreparedStatement ps;
        ResultSet rs;
        User user=null;
        Connection connection = Tool.getConnection();
        try {
             ps = connection.prepareStatement("select * from layui_user where username=?");
             ps.setString(1,username);
             rs = ps.executeQuery();

             while (rs.next()){
                 user=new User();
                 user.setId(rs.getInt(1));
                 user.setUseranme(rs.getString(2));
                 user.setPassword(rs.getString(3));

             }
        } catch (SQLException e) {
            e.printStackTrace();
        }


        return user;
    }
}

5,jsp页面

判断用户名

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>demo</title>
    <style>
        li{
            list-style: none;
            margin: 10px;
        }
    </style>
</head>
<body>
<form>
    <li>用户名:<input type="text" name="username"></li>
    <li class="msg"></li>
    <li><input type="submit" value="ok"></li>
</form>
<script src="script/jquery-3.3.1.min.js"></script>
<script>
    $(":input[name='username']").change(function() {

        var username= $(this).val();
        $.ajax({
            url : "/doDemo",
            data : {username:username},
            async: true,
            type : "post",
            dataType : "text",
            success : function (data) {
                $(".msg").html(data);
            },
            error :function () {
            }
        })

    })
</script>
</body>
</html>

6,Servlet处理

    package com.wxy.control;

import com.wxy.bean.User;
import com.wxy.dao.UserDao;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Created by WXY on 2018/12/13 0013 上午 9:04
 */
public class DoDemoServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

       req.setCharacterEncoding("utf-8");
       resp.setContentType("text/html;charset=utf-8");
        String username =req.getParameter("username");

        User user = new UserDao().QueryUser(username);
        String result="";
        if (user!=null){
            result="<font color='red'>已存在!该用户名不可用</font>";
        }else {
            result="<font color='green'>该用户名可用</font>";
        }
        resp.getWriter().print(result);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      doGet(req, resp);
    }
}

7,运行结果

数据库中三条数据1,wxy 2,admin 3,123
结果

最后修改:2019 年 02 月 09 日 01 : 24 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论

2 条评论

  1. 飞跃

    博主你好,你博客的圆角化怎么设置的?

    1. wxy
      @飞跃

      加个css样式
      /首页文章版式圆角化/
      .panel{

      border: none; border-radius: 15px;

      }

      .panel-small{

      border: none; border-radius: 15px;

      }

      .item-thumb{

      border-radius: 15px;

      }