【SSH网上商城】Ajax异步校验

简介

　　用户注册时，要求用户名不能相同，在这里用Ajax异步校验的方式来给出提示。效果：输入用户名，后面即给出提示信息。

实例

1、准备环境

　　新建一个web项目，配置Struts2环境。MySQL数据库新建一个user表，三个字段：id、username、password。

2、编写代码

新建实体类User，三个属性id、username、password，并给出它们的getter和setter方法，代码：略。
新建Action类UserAction，代码如下：

public class UserAction extends ActionSupport {
    private User user;

    public User getUser() {
        return user;
    }

    public void setUser(User user) {
        this.user = user;
    }

    // AJAX进行异步校验用户名的方法
    public String findByName() throws Exception {
        // 调用Service进行查询
        Boolean existUser = findByUsername(user.getUsername());
        // 获得response对象，向页面输出
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("text/html;charset=utf-8");

        if (existUser) {
            // 查询到该用户
            response.getWriter().println("<font color='red'>用户名已经存在</font>");
        } else {
            // 没有查询到用户
            response.getWriter().println("<font color='green'>用户名可以使用</font>");
        }
        return NONE;
    }

    public Boolean findByUsername(String username) throws Exception {
        String url = "jdbc:mysql://127.0.0.1:3306/dbname";
        // 1、加载驱动程序
        Class.forName("com.mysql.jdbc.Driver");
        // 2、与数据库建立连接
        Connection conn = DriverManager.getConnection(url, "root", "jujianfei");
        // 创建Statement对象，用于执行SQL语句
        Statement sm = conn.createStatement();
        // 3、执行一个SQL Select语句，将其存入ResultSet中
        ResultSet rs = sm.executeQuery("Select username,password from user where username ="+ username);
        if (rs.next()) {
            rs.close();
            sm.close();
            conn.close();
            return true;
        } else {
            rs.close();
            sm.close();
            conn.close();
            return false;
        }
    }
}

struts.xml文件配置，代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
    <constant name="struts.devMode" value="false" />
    <package name="shop" extends="struts-default" namespace="/">
        <!-- 配置用户模块的Action -->
        <action name="user_*" class="cn.jujianfei.action.UserAction" method="{1}">
        </action>
    </package>
</struts>

新建jsp文件index.jsp，代码如下：

<head>
<base href="<%=basePath%>">
<title>ajax page</title>
<script>
    function checkUsername() {
        // 获得文件框值
        var username = document.getElementById("username").value;
        // 1.创建异步交互对象
        var xhr = createXmlHttp();
        // 2.设置监听
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    document.getElementById("tip").innerHTML = xhr.responseText;
                }
            }
        }
        // 3.打开连接
        xhr.open("GET",
                "${pageContext.request.contextPath}/user_findByName.action?time="
                        + new Date().getTime() + "&user.username=" + username, true);
        // 4.发送
        xhr.send(null);
    }

    function createXmlHttp() {
        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;
    }
</script>
</head>
<body>
    <form action="index.jsp" method="post">
        用户名:<input type="text" id="username" name="username" onblur="checkUsername()"/><span
            id="tip"></span><br> 密 码:<input type="text" name="pwd" /><br>
        <input type="submit" value="登录" />
    </form>
</body>

【SSH网上商城】Ajax异步校验

简介

实例

1、准备环境

2、编写代码

猜你喜欢