web实验2、3

于 2023-04-23 18:10:40 发布
阅读量164 收藏
点赞数
文章标签： 前端 javascript servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/brolyLoveEng/article/details/130327507
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
        $().ready(function (){
            $("#loginBtn").click(function(){
                var errMsg = "";
                if($("#user").val()==""){
                    errMsg = "请输入用户名";
   
                }
                else if($("#phone").val()==""){
                    errMsg = "请输入手机号";
    
                }
                else if($("#passward").val()==""){
                    errMsg = "请输入密码";
    
                }
                else if($("#passward").val()!=$("#repassward").val()){
                    errMsg = "两次输入密码不一致！";
    
                }
                else if($("#check").val()!==""){
                    errMsg = "两次输入密码不一致！";
    
                }
                if(errMsg != ""){
                    $("#errorArea").text(errMsg);


                }
                else{
                    var paras = { name: $("#user").val(), phone: $("#phone").val(), password: $("#passward").val()};
                    $.ajax({
                    url: "http://43.136.217.18:8081/registAsync",
                    data: paras,
                    type: "POST",
                    datatype:"json",
                    //访问成功，解析json
                    success: function(data){
                    //如果操作成功
                    if(data.state == "SUC"){
                    	//跳转到success.html
                        window.location.href="http://43.136.217.18:8081/success.html";
                    }
                    else{
                    	//显示出错信息
                        var msg = data.msg;
                        alert(msg);
                    }
                    },
                    //访问失败
                    error: function(data){
                    		//显示“无法连接到服务器”
                            var msg = data.msg; 
                    }
                    })
                }
            });
        });
    </script>
</head>
<body>
    <div class="header">
        <div class="header_left"></div>
        <div class="header_right"></div>
        <div class="header_centre">用户注册</div>
    </div>
    <div class="body">
    <!-- <form action="http://43.136.217.18:8081/registSync" method="post">     -->
        <div class="username">
            <div class="username_left">用户名</div>
            <div class="username_centre"><input type="text" name="name" id="user" placeholder="请输入用户名" onclick="change()"></div>
        </div>

        <div class="phonenum">
            <div class="phonenum_left">手机号</div>
            <div class="phonenum_right"><input type="number"  id='check' placeholder="请输入验证码"><input type="button" id="checkBtn" value="发送验证码" onclick="checkB()"></div>
            <div class="phonenum_centre"><input type="tel" name="phone" id='phone' placeholder="请输入手机号" onclick="changeNum() "></div>
        </div>
        
        <div class="passward">
            <div class="passward_left">密码</div>
            <div class="passward_centre"><input type="password" name="passward" id="passward" placeholder="" onclick="change()"></div>
        </div>

        <div class="re-passward">
            <div class="re-passward_left">确认密码</div>
            <div class="re-passward_centre"><input type="password" id="repassward" placeholder="" onclick="change()"></div>
        </div>
        <div id="errorArea">test</div> 
        <div class="register">
            <div class="button"><input type="button" id="loginBtn" value="注册" onclick="regist()"></div>
            <div class="dif-choice_left">已有账号</div>
            <div class="dif-choice_right">更换手机号</div>
        </div>
        <div class="bottom">
            <div class="bottom_left"></div>
            <div class="bottom_word">首页</div>
            <div class="bottom_right"></div>
            <div class="bottom_setting">设置</div>
            <div class="bottom_centre"></div>
            
        </div>
        
    <!-- </form> -->
</body>
</html>

success：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$.ajax({
		       url: "getRegister",
		       //data:{id:1,type:"test"},
		       type: "GET",
		       dataType:'xml',
		       success:function (data) {
		    	   var html = "";
		    	   if($(data).find("State").text() == "SUC"){
						alert(231);
		    		   html += "注册成功：<br>";
			           html += "用户名：" + $(data).find("Name").text() + "<br>";
			           html += "手机号：" + $(data).find("Phone").text();
		    	   }
		    	   else{
			           html += "出错了：" + $(data).find("Msg").text();
		    	   }
		    	   $("#msgArea").html(html);
		       },
		       error:function (Msg) {
		           var html = "出错了：" + $(data).find("Msg").text();
		    	   $("#msgArea").html(html);
		       }
		   });
	});
</script>
</head>
<body>
<div id="msgArea"></div>
</body>
</html>

css：

*{
 margin: 0;
 padding: 0;   
}
.header{
    background-color: #e66c05;
}
.header_left{
    width: 1.04rem;
    height: 1.32rem;
    float: left;
    background-image: url(img/sub_back.png);
    background-size: .55rem .55rem;
    background-repeat: no-repeat;
    background-position: .37rem .46rem;
}
.header_centre{
    height: .57rem;
    margin: 0rem 1.04rem 0rem 1.04rem;
    text-align: center;
    font-size: .57rem;
    line-height: .57rem;
    padding: .37rem 0rem .38rem 0rem;
    color: #ffffff;
   
}
.header_right{
    width: 1.04rem;
    height: 1.32rem;
    float: right;
    background-image: url(img/sub_more.png);
    background-size: .55rem .55rem;
    background-repeat: no-repeat;
    background-position: 0rem .37rem;
}
input{
    border-top: 0;
    border-right: 0;
    border-left: 0;
    font-size: .47rem;
    letter-spacing: 0.05rem;
    width: 7rem;
}
input[id='phone']{
    border-top: 0;
    border-right: 0;
    border-left: 0;
    font-size: .47rem;
    letter-spacing: 0.05rem;
    width: 3.8rem;
}
input[id='check']{
    border-top: 0;
    border-right: 0;
    border-left: 0;
    font-size: .30rem;
    letter-spacing: 0.05rem;
    width: 2.8rem;
    display: none;
    position: 0rem 2rem 0rem 0rem;
}
input[id='checkBtn']{
    font-size: .30rem;
    letter-spacing: 0.05rem;
    width: 2rem;
    float: right;
    display: block;
}
input[id='loginBtn']{
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    font-size: .47rem;
    width: 100%;
    height: 1rem;
    color: white;
    background-color: #e56e10;
}
.username{
    margin: .6rem 0rem 0rem 0rem;

}
.phonenum{
    margin: .6rem 0rem 0rem 0rem;

}
.passward{
    margin: .6rem 0rem 0rem 0rem;

}
.re-passward{
    margin: .6rem 0rem 0rem 0rem;

}
#errorArea{
    margin: .6rem 0rem 0rem 3.3rem;
    color: red;
    font-size: .6rem;
    display: none;
}
.register{
    margin: .8rem 0rem 0rem 0rem;

}
.bottom{
    position: relative;
    position: absolute;
    bottom: 0;
    width: 100%;

}

.username_left{
    height: .50rem;
    float: left;
    text-align: center;
    font-size: .47rem;
    letter-spacing: 0.1rem;
    padding: 0rem 0rem 0rem .42rem;

}
.username_centre{
    height: .50rem;
    font-size: .47rem;
    margin: 0rem 0rem 0rem 2.6rem;

    
}

.phonenum_left{
    height: .50rem;
    float: left;
    text-align: center;
    font-size: .47rem;
    letter-spacing: 0.1rem;
    padding: 0rem 0rem 0rem .42rem;


}
.phonenum_right{
    float: right;
    text-align: left;
    font-size: .3rem;
    margin: .1rem 1.6rem 0rem .2rem;
    color: #e56e10; 
}
.phonenum_centre{
    height: .50rem;
    font-size: .47rem;
    margin: 0rem 5rem 0rem 2.6rem;
    float: none;
}




.passward_left{
    height: .50rem;
    float: left;
    text-align: center;
    font-size: .47rem;
    letter-spacing: 0.1rem;
    padding: 0rem 0rem 0rem .42rem;

}
.passward_centre{
    height: .50rem;
    font-size: .47rem;
    margin: 0rem 0rem 0rem 2.6rem;

    
}

.re-passward_left{
    height: .50rem;
    float: left;
    text-align: center;
    font-size: .47rem;
    letter-spacing: 0.1rem;
    padding: 0rem 0rem 0rem .42rem;

}
.re-passward_centre{
    height: .50rem;
    font-size: .47rem;
    margin: 0rem 0rem 0rem 2.6rem;

    
}

.button{
    height: 1.1rem;
    text-align: center;
    font-size: .47rem;
    letter-spacing: .4rem;
    color: white;
    background-color: #e56e10;
    margin: 0rem .4rem 0rem .4rem;
    padding: .32rem 0rem 0rem 0rem;
}
.dif-choice_left{
    height: .3rem;
    font-size: .3rem;
    letter-spacing: .1rem;
    float: left;
    padding: .2rem 0rem 0rem .4rem;
}
.dif-choice_right{
    height: .3rem;
    font-size: .3rem;
    letter-spacing: .1rem;
    float: right;
    padding: .2rem .4rem 0rem 0rem;
}

.bottom_left{
    height: 1.2rem;
    width: .55rem;
    float: left;
    background-color: white;
    background-image: url(img/main_home2.png);
    background-size: .64rem .64rem;
    background-repeat: no-repeat;
    background-position: .2rem .2rem;
    padding: .0rem .4rem 0rem .2rem;
    margin: 0rem 0rem 0rem .4rem    ;
}
.bottom_word{
    height: .3rem;
    position: absolute;
    float: left;
    font-size: .1rem;
    letter-spacing: .08rem;
    color: #e56e10;
    padding: .8rem 0rem 0rem .5rem;
}
.bottom_centre{
    height: 1.4rem;
    width: 100%;
    background-color: #e56e10;
}
.bottom_right{
    height: .64rem;
    width: .64rem;
    float: right;  

    background-image: url(img/main_config1.png);
    background-size: .64rem .64rem;
    background-repeat: no-repeat;
    background-position: 0rem 0rem;

    margin: .2rem .4rem 0rem 0rem;
}
.bottom_setting{
    height: .2rem;
    position: absolute;
    float: right;
    padding: .9rem 0rem 0rem 9.7rem;
    font-size: .2rem;
    letter-spacing: .1rem;
    color: white;

}
/* 
.bottom{
    background-color: #e66c05;
    position: absoulute;
    bottom: 0;
}
.bottom_left{
    height: 1.44rem;
    width: 1.2rem;
    float: left;
    background-image: url(img/main_home2.png);
    background-size: .64rem .64rem;
    background-repeat: no-repeat;
    background-position: .16rem .25rem  ;
} */
Broly>
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值