通过ajax和json进行表单验证（异步加载）

首先我们在action中定义一个需要json传值的map

和需要与页面交互的数据      

private Map map;

    public Map getMap() {
        return map;
    }

    public void setMap(Map map) {
        this.map = map;
    }
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

当我们进行注册时，ajax直接进行判断数据库中是否存在，如果存在则提示无法注册

//dao层
public List<UserBean> getUserByName(String name){
        List user = hibernateTemplate.find("from UserBean where name=? ",name);
        return user;
    }

action中

public String add() {
        List list = userDao.getUserByName(name);
        map = new HashMap();
        map.put("state", "ok");
        if(list.size()!=0) {
            map.put("message", "该帐号已存在~亲亲！");
            map.put("code", 1);
        }else {
            map.put("message", "该帐号可以用~");
            map.put("code", 0);
        }
        return SUCCESS;
    }

struts中进行配置

<package name="json" namespace="/api" extends="json-default">
        <action name="addAction" class="apiAction" method="add">
            <result name="success" type="json">
                <param name="root">map</param>
            </result>
        </action>
    </package>

接下来进行jsp页面

<!-- 布局 -->
<form action="addAction" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" id="name" name="name" onblur="add()" /></td>
                <td><span id="message"></span></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="pwd" /></td>
            </tr>
            <tr>
                <td><input type="submit" value="注册"/></td>
                <td><input type="reset" value="重置"/></td>
            </tr>
        </table>
    </form>
    <!-- 导入jquery以及样式 -->
    script type="text/javascript" src="res/jquery.min.js"></script>
<style type="text/css">
    .red{
        color: red;
    }
    .green{
        color: green;
    }

<!--ajax代码-->
<script type="text/javascript">
    function add() {
        var name = $("#name").val();
        $.ajax({
               type: "POST",
               url: "api/addAction",
               data: "name="+name,
               success: function(msg){
                if(msg.code==1){
                    $("#message").removeClass();
                    $("#message").addClass("red");
                    $("#message").html(msg.message);
                }else{
                    $("#message").removeClass();
                    $("#message").addClass("green");
                    $("#message").html(msg.message);
                }
               }
            });
    }

</script>

实现效果