Web前端实验5

最新推荐文章于 2024-07-17 13:47:47 发布

仰望神

最新推荐文章于 2024-07-17 13:47:47 发布

阅读量287

点赞数

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/qq_53745727/article/details/130327647

版权

题目：

1、修改实验3代码，制作同步注册功能

(1) 将实验3的main.html复制成main_sync.html，参考《实验5_Web接口文档》1.2节，为对应的表单控件添加name属性（同步提交时，控件的name值与服务器收到的参数名一一对应）；将注册按钮类型改为submit；再添加一个form标记将所有表单控件包围，action和method参考《实验5_Web接口文档》1.1节，参考代码（需要添加和修改的地方用红色标示）：

</form>

2、修改实验3代码，制作异步（AJAX）注册功能

(1) 将实验3的main.html复制成main_async.html，参考《实验5_Web接口文档》2.2节中的参数名，提取用户名、手机号和密码框中的值并构造成参数对象，对象属性和参数名一一对应，参考代码：

//提取参数

var paras = { name: "用户名文本框的值", phone: "手机号文本框的值", password: "密码框的值"};

$.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

}

else{

…… //显示出错信息

}

//访问失败

error: function(data){

….. //显示“无法连接到服务器”

}

})

注意：

① 修改浏览器URL即可完成跳转，如：window.location.href="新页面URL";

② 将success.html和error.html拷贝到main_async.html同一个目录中；

③ 上述错误信息显示到实验3的数据验证失败信息框中。

④ 要求使用jQuery代码编写

3、（选做）部署Tomcat服务器运行网页

（1）参考文档《Tomcat网站部署》部署服务器程序，将main_sync.html、main_async.html、success.html和error.html也部署到网站中。

（2）网页中使用的所有地址要采用相对地址，将地址的域名部分去掉，如：

将http://43.136.217.18:8081/registAsync改为registAsync

代码：

实验5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>实验2_202031061288邓涛</title>
    <link  href="实验3_202031061288邓涛.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        function setRootFontSize(){
            var rootHtml = document.documentElement;
            var rem = rootHtml.clientWidth / (1080 / 100);   //1080为设计图px宽度
            rootHtml.style.fontSize = rem + "px";
        }
        setRootFontSize();   //网页首次载入时执行一次
        window.addEventListener("resize", setRootFontSize, false);   //网页大小改变时执行
        window.addEventListener("orientationchange", setRootFontSize, false);   //横屏切换时执行
        function fsyzm(){
            var yanzhengma1 = document.getElementById("yanzhengma1");
            var yanzhengma = document.getElementById("yanzhengma");
            yanzhengma.style.display = "none";
            yanzhengma1.style.display = "block";
        }
        function regist(){
            var error = document.getElementById("errorArea");
            var user = document.getElementById("user");
            var phone = document.getElementById("phone");
            var password1 = document.getElementById("password1");
            var password2 = document.getElementById("password2");
            var yanzhengma = document.getElementById("yanzhengma1");
            if(user.value == ""){
                error.innerText = "* 用户名不能为空";
                error.style.display = "block";
            }
            else if(phone.value == ""){
                error.innerText = "* 手机号不能为空";
                error.style.display = "block";
            }
            else if(phone.value.includes("!","@","`","~","#","$","%","^","&","*","(",")","?",">","'",":","{","}","\\","|")){
                error.innerText = "* 手机号不正确";
                error.style.display = "block";
            }
            else if(password1.value == ""){
                error.innerText = "* 密码不能为空";
                error.style.display = "block";
            }
            else if(password2.value == ""){
                error.innerText = "* 确认密码不能为空";
                error.style.display = "block";
            }
            else if(password1.value != password2.value){
                error.innerText = "* 两次输入密码不一致";
                error.style.display = "block";
            }
            else if(yanzhengma1.value == ""){
                error.innerText = "* 验证码不能为空";
                error.style.display = "block";
            }
            else if(yanzhengma1.value != 123456){
                error.innerText = "* 验证码不正确";
                error.style.display = "block";
            }
            else{
                error.innerText = "已提交注册信息";
                error.style.display = "block";
            }
        }

        function hideError(){
            var error = document.getElementById("errorArea");
            error.style.display = "none";
        }

        function is_change(){
            var error = document.getElementById("errorArea");
            if(error.style.display != "none"){
                error.style.display = "none";
            }
        }
        function sjh_change(){
            var yanzhengma1 = document.getElementById("yanzhengma1");
            var yanzhengma = document.getElementById("yanzhengma");
            if(yanzhengma1.style.display == "block"){
                yanzhengma.style.display = "block";
                yanzhengma1.style.display = "none";
            }
        }
















        $().ready(function(){
           $("#loginBtn").click(function(){
               var errMsg = "";
               //验证输入
               if($("#user").val() == "" || $("#user").val() == " " || $("#user").val() == "\t"){
                   errMsg = "请输入用户名";
               }
               else if($("#phone").val() == ""){
                   errMsg = "请输入手机号";
               }
               else if($("#password1").val() == "") {
                   errMsg = "请输入密码";
               }
               //通过输入检查
               if(errMsg != ""){
                   $("#errorArea").text(errMsg);
               }
               //通过输入检查，开始提交数据
               else{
                   var paras = {user:$("#user").val(),phone:$("#phone").val(),password1:$("#password1").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
                               alert(data.Content.Name+" "+data.Content.Phone);
                           }
                           else{
                                $("#errorArea").text(data.msg);
                           }
                       },
                       //访问失败
                       error: function(data){
                       //显示“无法连接到服务器”
                       alert("无法连接到服务器")
                       }
                   })
           }
       });
    });
    </script>
</head>
<body>
    <!--头部区域-->
    <div id="header">
        <div class="head_left"></div>
        <div class="head_right"></div>
        <div class="head_title">用户注册</div>
    </div>
    <!--正文区域-->
    <div id="contentArea">
        <div class="content1_left">用户名</div>
        <div class="content1_center"><input class="input1" type="text" id="user" placeholder="请输入用户名" name="name"  ></div>
        <div class="content1_left">手机号</div>
        <div class="content1_right"><input type="tel" id="yanzhengma" value="发送验证码" onclick="fsyzm()"><input class="input3" type="tel"  id="yanzhengma1" placeholder="请输入验证码"  ></div>
<!--        <div class="content1_right"><input class="input3" type="tel"  id="yanzhengma1" placeholder="请输入验证码" onclick="hideError()" onchange="sjh_change()"></div>-->
        <div class="content1_center1"><input class="input2" type="tel" id="phone" placeholder="请输入手机号" name="phone" ></div>
        <div class="content1_left">密码</div>
        <div class="content1_center"><input class="input1" type="password" name="password" id="password1" ></div>
        <div class="content1_left">确认密码</div>
        <div class="content1_center"><input class="input1" type="password" id="password2" ></div>
    </div>
    <div id="errorArea">* 用户名不能为空</div>
    <!--尾部区域-->
    <div id="tailArea">
<!--        <div class="tail_title" onclick="regist()">注   册</div>-->
        <input type="button" id="loginBtn" value="注   册" >
    </div>
    <div id="tailArea1">
        <div class="tail_left">已有账号</div>
        <div class="tail_right">更换手机号</div>
    </div>
    <div id="tailArea2">
        <div class="tail_title1_left">首页</div>
        <div class="tail_title1_left2">设置</div>
        <div class="tail_title1_left1">首页</div>
    </div>
</body>
</html>

仰望神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web前端实验5

(1) 将实验3的main.html复制成main_sync.html，参考《实验5_Web接口文档》1.2节，为对应的表单控件添加name属性（同步提交时，控件的name值与服务器收到的参数名一一对应）；将注册按钮类型改为submit；再添加一个form标记将所有表单控件包围，action和method参考《实验5_Web接口文档》1.1节，参考代码（需要添加和修改的地方用红色标示）：div>用户名</div>></div>div>手机号</div>></div>div>密码。
复制链接

扫一扫