ajax中 XMLHttpRequest

运用ajax进行表单验证

控制器

 public ActionResult Index()
        {
            return View();
        }
        public ActionResult select()
        {
            //声明数组
            string[] userNameArray = new string[] { "aa", "bb", "cc" };
            //获取客户端发送的客户名
            string userName = Request.QueryString["userName"];
            //声明变量，存储返回结果
            string result = "此用户名合法";
            for (int i = 0; i < userNameArray.Length; i++)
            {
                if (userName==userNameArray[i])
                {
                    result = "此用户名存在";
                    break;
                }
            }
            return Content(result);
        }

index页面ajax传值

<style>
    .red {
    color:red;
    }
</style>

<form>
    <div class="form-group">
        <label for="userName">用户名：</label>
        <input type="text" class="form-control" id="userName" />
    </div>
    <div id="tips"></div>
    <div class="form-group">
        <label for="userPwd">密码：</label>
        <input type="text" class="form-control" id="userPwd" />
    </div>
</form>

@section scripts{
    <script type="text/javascript">
        $(function () {
            $("#userName").blur(function () {
                //获取用户名
                var userName = $("#userName").val();
                //实例化一个对象
                var xhr = new XMLHttpRequest();
                //初始化一个请求
                xhr.open("get", "/user/select?userName=" + userName, true);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        //接受返回的结果
                        var result = xhr.responseText;
                        if (result == "此用户名存在") {
                            $("#tips").addClass("red");     
                        }
                        else {
                            $("#tips").removeClass("red");
                        }
                        $("#tips").html(result);
                    }
                }
            });
        })

    </script>
    }

实现效果