ajax判断登录用户名

只进行简单的用户名判断，并没有进行数据库中的数据校验；

先写出一个简单的form表单：

<form  method="post">
    <p>用户名：<input type="text" id="name" onblur="obr()" onfocus="ofs(this.id)"><span id="test1"></span></p>
    <p>密码：&emsp;<input type="text" id="password"></p>
    <input type="button" id="in" value="提交" onclick="testAjax()">
    <span id="message"></span>
</form>

在用户名这一栏进行input，当input失去焦点的时候，进行ajax请求：

判断输入的用户名时候为可用的，可用的提示“用户名可以使用”；不可用提示“用户名已被注册”。

先写一个失去焦点动作：

function obr() {
        $.ajax({
            type:"post",
            url:"/pang",
            data:{
                name:$('#name').val()
            },
            dataType:"text",
            success:function(data) {
                if (data == "yes"){
                    // test1.innerText = "用户名已被注册";
                    $('#test1').html("用户名可以使用");
                    $('#test1').css("color", "green");
                }else{
                    $('#test1').html("用户名已被注册");
                    $('#test1').css("color", "red");
                }
            }
        })
    }

再写一个获取焦点动作，这样可以使得重新修改自己的input的时候，可以去掉后面的提示信息：

function ofs(x) {
        document.getElementById(x).style.backgroundColor = "white";
        $('#test1').html("");
    }

编写后台，判断输入的用户名是否为可用的：（这里没有进行密码判断，密码的可以进行密码长度的校验）

@RequestMapping(value = "/pang", method = RequestMethod.POST)
    @ResponseBody
    public String pang(HttpServletRequest request, HttpServletResponse response) {
        String name = request.getParameter("name");
//        String password = request.getParameter("password");
//        System.out.println(name + password);
        System.out.println(name);
        String result = "yes";
        if (name.equals("small") || name.equals("pang")) {
            result = "no";
        }
        return result;
    }

下面来看一下两种效果图：

---