【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>

原文链接：https://www.f2er.com/ajax/160445.html

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

简介

实例

1、准备环境

2、编写代码

猜你在找的Ajax相关文章