使用struts2+Ajax+jquery验证用户名是否已被注册

下面我将详细讲解如何使用struts2+Ajax+jquery验证用户名是否已被注册的完整攻略：

1. 准备工作

首先需要准备以下工具和环境：

struts2-web框架：用于接收和处理请求，在返回结果时可以返回json字符串。
jquery：用于发送Ajax请求。
验证用户名是否已被注册的代码功能。

2. 编写struts.xml配置文件

首先需要在struts2的配置文件struts.xml中添加以下配置：

<package name="json" extends="json-default">
    <result-types>
        <result-type name="json" class="org.apache.struts2.json.JSONResult" />
    </result-types>
    <interceptors>
        <interceptor name="json" class="org.apache.struts2.json.JSONInterceptor" />
        <interceptor-stack name="jsonInterceptionStack">
            <interceptor-ref name="json"/>
        </interceptor-stack>
    </interceptors>
</package>

这样就可以在Struts2中支持返回json格式的数据。

3. 编写前端页面

在前端页面中需要添加一个输入框和一个按钮，输入框用于输入要查询的用户名，按钮用于进行查询，同时需要引入jquery库：

<html>
<head>
    <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function checkUser() {
            var username = $("#username").val();
            $.ajax({
                type: "POST",
                url: "checkUserAction.action",
                data: {username: username},
                success: function(data) {
                    if (data.result == "true") {
                        $("#msg").html(username + "：用户名已存在");
                    } else {
                        $("#msg").html(username + "：用户名不存在");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <label>用户名:</label><input type="text" id="username" name="username"/>&nbsp;&nbsp;
    <input type="button" name="button" value="检查" onclick="checkUser();"/>
    <p id="msg"></p>
</body>
</html>

在点击检查按钮时，会通过jquery发送Ajax请求到checkUserAction.action，并传递用户名参数username，在回调处理中可根据返回值判断用户名是否已被注册，从而更新页面中的提示消息。

4. 编写Action类

在Struts2中需要编写一个Action类，用于接受来自前端页面的请求：

package com.example;

import com.opensymphony.xwork2.ActionSupport;

public class CheckUserAction extends ActionSupport {
    private String username;

    @Override
    public String execute() throws Exception {
        boolean exist = checkUser(username);
        return SUCCESS;
    }

    public boolean checkUser(String username) {
        // 略去验证用户名是否已被注册的代码
        return true;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }
}

在执行execute()方法时，会调用checkUser()方法将收到的用户名进行验证，如果用户名已被注册，则返回true，否则返回false。

5. 编写返回json数据的拦截器

这里需要编写一个拦截器，用于将execute()方法的返回值转换为json字符串，代码如下：

package com.example;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionInvocation;
import com.opensymphony.xwork2.Result;
import com.opensymphony.xwork2.interceptor.MethodFilterInterceptor;
import org.apache.struts2.ServletActionContext;

import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;

public class JsonInterceptor extends MethodFilterInterceptor implements Result {
    @Override
    public void execute(ActionInvocation actionInvocation) throws Exception {
        actionInvocation.setResult(this);
    }

    @Override
    public void execute(ActionInvocation actionInvocation, HttpServletResponse httpServletResponse) throws Exception {
        Object returnValue = actionInvocation.getResultCode();
        if (null != returnValue && returnValue instanceof Boolean) {
            PrintWriter writer = ServletActionContext.getResponse().getWriter();
            writer.write("{\"result\": \"" + returnValue.toString() + "\"}");
            writer.close();
        }
    }
}

6. 在struts.xml中配置Action和Interceptor

在struts.xml中配置Action和JsonInterceptor：

<package name="user" namespace="/user" extends="json">
    <action name="checkUserAction" class="com.example.CheckUserAction">
        <interceptor-ref name="json"/>
        <interceptor-ref name="defaultStack"/>
        <result name="success" type="json"/>
    </action>
</package>

这里配置了Action的名称为checkUserAction，使用了名为json的Interceptor，同时使用默认的拦截器栈，并在返回成功时使用Json格式的数据进行返回。

至此，整个流程已经完成。当在前端页面上输入用户名并点击检查按钮时，会通过jquery发送Ajax请求到服务器端的Action，Action会调用验证用户名的逻辑代码进行判断，然后通过Json格式的数据将结果返回到前端页面，并进行处理展示。

示例

下面给出两个示例的源码：

示例1：在jsp中直接嵌入jquery

页面代码：

<%@ page contentType="text/html;charset=utf-8" language="java" %>
<html>
<head>
    <title>基于Struts2+JQuery实现的异步验证示例</title>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function checkUserName() {
            var username = $("#username").val();
            if (username.trim() == '') {
                alert("用户名不能为空！");
                $("#username").focus();
                return;
            }
            $.ajax({
                type: "POST",
                url: "checkUserName.action",
                data: "username=" + encodeURI(username),
                success: function(result) {
                    if (result == "true") {
                        $("#result").html(username + " 已经被注册。");
                    } else if (result == "false") {
                        $("#result").html(username + " 可以注册。");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <form>
        用户名：<input type="text" name="username" id="username"><br>
        <br>
        <input type="button" value="检查用户名" onclick="checkUserName();">
        <p id="result"></p>
    </form>
</body>
</html>

Action代码：

package demo.action;

import com.opensymphony.xwork2.ActionSupport;
import org.apache.struts2.ServletActionContext;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;


public class CheckUserNameAction extends ActionSupport {

    private String username;

    @Override
    public String execute() throws Exception {
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        if ("admin".equals(username)) {
            out.println("true");
        } else {
            out.println("false");
        }
        out.close();
        return null;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }
}

示例2：在jsp中不嵌入jquery

页面代码中只引入jquery-x.x.x.min.js，但在jsp中不嵌入任何jquery代码，而是在外部的js文件中编写代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>基于Struts2+JQuery实现的异步验证示例</title>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script type="text/javascript" src="checkUserName.js"></script>
</head>
<body>
    <form>
        用户名：<input type="text" name="username" id="username"><br>
        <br>
        <input type="button" value="检查用户名" onclick="checkUserName();">
        <p id="result"></p>
    </form>
</body>
</html>

checkUserName.js代码：

/**
 * 异步检查用户名是否已存在
 */
function checkUserName() {
    var username = $("#username").val();
    if (username.trim() == '') {
        alert("用户名不能为空！");
        $("#username").focus();
        return;
    }
    $.ajax({
        type: "POST",
        url: "checkUserName.action",
        data: "username=" + encodeURI(username),
        success: function(result) {
            if (result == "true") {
                $("#result").html(username + " 已经被注册。");
            } else if (result == "false") {
                $("#result").html(username + " 可以注册。");
            }
        }
    });
}

Action代码与示例1中的代码相同。

注意：如果您要尝试示例2，还需要在web.xml文件中启用Struts2的拦截器：

<filter>
    <filter-name>struts2</filter-name>
    <filter-class>org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

这样Struts2能够正确处理请求和响应，并将更改写回到服务器端。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用struts2+Ajax+jquery验证用户名是否已被注册 - Python技术站