QM.C

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jQuery---ajxa 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<style type="text/css">
.error {
    color: red;
}

.success {
    color: green;
}
</style>


</head>

<body>
    <form action="register" method="post">
        用户名：<input id="uid" type="text" name="username"
            onblur="checkUnameUnique();"><span id="uspan"></span><br />
        密码：<br /> .....<br /> <input type="submit" value="注册" />
    </form>

    <!--  <script type="text/javascript">
    
        function checkUnameUnique(){
        //不希望用户在点击注册以后才验证用户名的唯一性，所以使用ajax将用户名发送到后台进行数据的唯一验证
        //1.获取用户输入的内容
        var userinput = document.getElementById("uid").value;
        //2.发送ajax
        var xhr = new XMLHttpRequest();
        xhr.open("get","unique?username="+userinput,true);
        xhr.send(null);
        
        //3.处理来自服务器的数据
        xhr.onreadystatechange = function(){
            if(xhr.readyState ==4 && xhr.status == 200){
                var servertext = xhr.responseText;
                //console.log(servertext);
                eval("var msg=" + servertext); //将字符串解析为js代码，并执行js代码
                 if(msg.msgId == "1"){
                     document.getElementById("uspan").className = "error";
                     document.getElementById("uspan").innerHTML = msg.msgContent;
                 }else if(msg.msgId == "0"){
                     document.getElementById("uspan").className = "success";
                     document.getElementById("uspan").innerHTML = msg.msgContent;
                 }else if(msg.msgId == "-1"){
                     document.getElementById("uspan").className = "error";
                     document.getElementById("uspan").innerHTML = msg.msgContent;
                 }
            }
        
        }
        
    }
    </script> -->
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        function checkUnameUnique(){
            $.ajax(
            {url:"unique",
            type:"get",
            async:true,
            dataType:"json",
            success:function(data){
                if(data.msgId == "1"){
                         document.getElementById("uspan").className = "error";
                         document.getElementById("uspan").innerHTML = data.msgContent;
                }
            }
            });
        }
    </script>

</body>
</html>

 

posted on 2019-05-17 21:09  QM.C  阅读(121)  评论(0)    收藏  举报