web--test5 jQuery AJAX编程

最新推荐文章于 2024-05-12 22:40:26 发布

Nuo__

最新推荐文章于 2024-05-12 22:40:26 发布

阅读量140

点赞数 1

文章标签： ajax 前端 jquery

本文链接：https://blog.csdn.net/m0_62976139/article/details/130327397

版权

异步

<!--
 * @Author: nuo
 * @Date: 2023-03-22 18:38:54
 * @LastEditTime: 2023-04-23 03:34:07
 * @FilePath: \实验5\test5\main_async.html
-->
<!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>5</title>
  <link rel="stylesheet" href="main.css" />
  <script type="text/javascript">
    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 checkReg() {
      var error_Area = document.getElementById("errorArea");
      var regExp = /^[1][3-9][0-9]{9}$/; //手机号判断正则
      if (document.getElementById("username").value == "") {
        error_Area.style.display = "block";
        error_Area.innerText = "用户名不能为空";
      } else if (document.getElementById("phoneText").value == "") {
        error_Area.style.display = "block";
        error_Area.innerText = "手机号不能为空";
      } else if (!regExp.test(document.getElementById("phoneText").value)) {
        errorArea.style.display = "block";
        errorArea.innerText = "手机号不正确";
      } else if (document.getElementById("secode").value == "") {
        errorArea.style.display = "block";
        errorArea.innerText = "* 验证码不能为空";
      } else if (document.getElementById("secode").value != "123456") {
        errorArea.style.display = "block";
        errorArea.innerText = "* 验证码不正确";
      }
      else if (document.getElementById("password").value == "") {
        error_Area.style.display = "block";
        error_Area.innerText = "密码不能为空";
      } else if (document.getElementById("repassword").value == "") {
        error_Area.style.display = "block";
        error_Area.innerText = "确认密码不能为空";
      } else if (
        document.getElementById("repassword").value !=
        document.getElementById("password").value
      ) {
        errorArea.style.display = "block";
        errorArea.innerText = "* 两次输入密码不一致";
      }
    }
    // 点击验证码验证内容
    function checkCode() {
      var errorArea = document.getElementById("errorArea");
      var regExp = /^[1][3-9][0-9]{9}$/; //手机号判断正则
      if (!regExp.test(document.getElementById("phoneText").value)) {
        errorArea.style.display = "block";
        errorArea.innerText = "手机号不正确";
      } else {
        document.getElementById("fasnumber").style.display = "none"
        document.getElementById("secode").style.display = "block";
      }
    }
    // 重新输入隐藏报错
    function reinput() {
      var error_Area = document.getElementById("errorArea");
      error_Area.style.display = "none";
    }

  </script>
  <script src="js/jquery.min.js"></script>
  <script>
    $().ready(function () {
      $("#main_button").click(function () {
        if ($("#username").val() == "")
          var msg = "请输入用户名";
        else {
          var paras = {
            name: $("#username").val(),
            phone: $("#userPhone").val(),
            password: $("#password").val()
          };
          $.ajax({
            url: "http://43.136.217.18:8081/registAsync",
            data: paras,
            type: "POST",
            datatype: "json",
            success: function (data) {
              if (data.state == "SUC") {
                alert(data.content.name + " " + data.content.phone);
                window.location.href = "success.html";
              }
              else {
                alert("错误" + data.msg);
              }
            },
            error: function (data) {
              location.href = "error.html"
            }
          });
        }
      });
    })
  </script>
</head>

<body onload="init()">
    <div id="header">
      <div class="header_left">&nbsp;</div>
      <div class="header_title">用户注册</div>
      <div class="header_right">&nbsp;</div>
    </div>
    <section class="login">
      <form method="post" action="index.html" onSubmit="return checkForm()">
        <div id="sub">
          <div>
            <div class="content_left" >用户名</div>
            <div class="content_center">
              <input type="text" id="username" placeholder="请输入用户名" oninput="reinput()" name="name" />
            </div>
          </div>
          <div>
            <div class="content_left" id="userPhone">手机号</div>
            <div class="content_center">
              <input class="main_phone" type="tel" id="phoneText" placeholder="请输入手机号" oninput="reinput()"
                name="phone" />
            </div>
            <input class="content_right" style="display: none;" type="number" name="" id="secode" oninput="reinput()"
              placeholder="请输入验证码" />
            <input type="button" value="发送验证码" class="fas" id="fasnumber" onclick="checkCode()"/>
          </div>
          <div>
            <div class="content_left">密码</div>
            <div class="content_center">
              <input id="password" type="password" placeholder="请输入密码" oninput="reinput()" name="password" />
            </div>
          </div>
          <div>
            <div class="content_left">确认密码</div>
            <div class="content_center">
              <input id="repassword" type="password" placeholder="请确认密码" oninput="reinput()" />
            </div>
          </div>
          <div id="errorArea" style="display: none"></div>
          <input type="submit" name="" id="main_button" value="注册" onclick="checkReg()" />
          <div>
      </form>
      <div class="s_left">已有帐号</div>
      <div class="s_right">更换手机号</div>
      </div>
      </div>
  </form>
  </section>
  <div id="bottom">
    <div class="bottom_left">
      <div class="bottom_leftimg"></div>
      <div class="bottom_leftText">首页</div>
    </div>
    <div class="bottom_right"></div>
    <div class="bottom_rightText">设置</div>
  </div>
</body>

</html>