Javaweb8==实现前后端分离的登录注册功能。前端html+ajax

最新推荐文章于 2024-04-26 16:47:03 发布

一个java开发

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.4k

点赞数

分类专栏： javaWeb 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/hebian1994/article/details/120988355

版权

javaWeb 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

后端如前两篇写的。

前端从网上扒了一篇前端页面，使用的是jQuery这个JavaScript库，用它来简化对DOM和BOM的操作。想用ajax技术发起HTTP请求并获取响应，所以采用了jQuery提供的方法实现ajax技术。

=========================================

ajax技术只是一种发起HTTP请求的技术概念，除了用jQuery这个库实现ajax技术，也可以用其他技术实现。

比如用原生的方式实现ajax技术，参照下文：原生方式实现Ajax技术 - 十五小哥哥 - 博客园一：什么是Ajax? Ajax：异步的JavaScript和XML，用于完成网页局部刷新功能（修改少量数据只用局部刷新，不用再整个网页重新加载）； XML的作用：1.是用于数据传输，但现在都在使用JShttps://www.cnblogs.com/wanghj-15/p/10969495.html jQuery这个JavaScript库就是对这些原生操作进行了一些包装。

==================================================

发起HTTP请求的技术也不止AJAX一种，还有其他的发起技术。比如浏览器自带了一个叫做XMLHttpRequest的DOM对象，通过写JavaScript代码调用这个对象的方法可以发起请求，其他方法参考：

前端发送http请求的几种方式_LV0720的博客-CSDN博客前端发送http的几种方式1. XMLHttpRequest2. ajax3. axios4. fetch1. XMLHttpRequest所有现代浏览器均内建了XMLHttpRequest对象，IE5、IE6使用ActiveX对象。 var xmlHttp; if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else{ xmlHttp = new ActiveXObject(); } xmlHttp.open(mhttps://blog.csdn.net/LV0720/article/details/106146484======================================================================

jQuery这个库提供了一个实现ajax技术的方法，这个方法的名字也容易让人搞混，就叫做ajax（）。。。。这个方法的调用流程，首先是引入jQuery这个库，先去jQuery官网下载官方提供的js文件，在HTML页面中加入下面这句话：

然后是使用：在HTML页面中再写一个 script标签，在这个标签里按jQuery官方提供的语法写即可，官方提供的API给出的使用语法为jQuery.ajax([settings])，详见官网描述。如下：

jQuery.ajax() | jQuery API Documentationhttps://api.jquery.com/jquery.ajax/#jQuery-ajax-url-settings

但是官网描述的不够详细，参看w3c的教程

jQuery - AJAX 简介https://www.w3school.com.cn/jquery/jquery_ajax_intro.asp =================================================================

以下是前端页面完整结构和代码：jquery.js直接去jquery官网下载，然后改成这个名字方便看

登录注册界面代码：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery实现登录注册表单代码</title>

    <style type="text/css">
      .center {
        text-align: center;
      }
      .login-page {
        width: 360px;
        padding: 8% 0 0;
        margin: auto;
      }
      .form {
        position: relative;
        z-index: 1;
        background: #ffffff;
        max-width: 360px;
        margin: 0 auto 100px;
        padding: 45px;
        text-align: center;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2),
          0 5px 5px 0 rgba(0, 0, 0, 0.24);
      }
      .form input {
        font-family: "Roboto", sans-serif;
        outline: 0;
        background: #f2f2f2;
        width: 100%;
        border: 0;
        margin: 0 0 15px;
        padding: 15px;
        box-sizing: border-box;
        font-size: 14px;
      }
      .form button {
        font-family: "Microsoft YaHei", "Roboto", sans-serif;
        text-transform: uppercase;
        outline: 0;
        background: #4caf50;
        width: 100%;
        border: 0;
        padding: 15px;
        color: #ffffff;
        font-size: 14px;
        -webkit-transition: all 0.3 ease;
        transition: all 0.3 ease;
        cursor: pointer;
      }
      .form button:hover,
      .form button:active,
      .form button:focus {
        background: #43a047;
      }
      .form .message {
        margin: 15px 0 0;
        color: #b3b3b3;
        font-size: 12px;
      }
      .form .message a {
        color: #4caf50;
        text-decoration: none;
      }
      .form .register-form {
        display: none;
      }
      .container {
        position: relative;
        z-index: 1;
        max-width: 300px;
        margin: 0 auto;
      }
      .container:before,
      .container:after {
        content: "";
        display: block;
        clear: both;
      }
      .container .info {
        margin: 50px auto;
        text-align: center;
      }
      .container .info h1 {
        margin: 0 0 15px;
        padding: 0;
        font-size: 36px;
        font-weight: 300;
        color: #1a1a1a;
      }
      .container .info span {
        color: #4d4d4d;
        font-size: 12px;
      }
      .container .info span a {
        color: #000000;
        text-decoration: none;
      }
      .container .info span .fa {
        color: #ef3b3a;
      }
      body {
        background: #76b852; /* fallback for old browsers */
        background: -webkit-linear-gradient(right, #76b852, #8dc26f);
        background: -moz-linear-gradient(right, #76b852, #8dc26f);
        background: -o-linear-gradient(right, #76b852, #8dc26f);
        background: linear-gradient(to left, #76b852, #8dc26f);
        font-family: "Roboto", sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      .shake_effect {
        -webkit-animation-name: shake;
        animation-name: shake;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
      }
      @-webkit-keyframes shake {
        from,
        to {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }

        10%,
        30%,
        50%,
        70%,
        90% {
          -webkit-transform: translate3d(-10px, 0, 0);
          transform: translate3d(-10px, 0, 0);
        }

        20%,
        40%,
        60%,
        80% {
          -webkit-transform: translate3d(10px, 0, 0);
          transform: translate3d(10px, 0, 0);
        }
      }

      @keyframes shake {
        from,
        to {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }

        10%,
        30%,
        50%,
        70%,
        90% {
          -webkit-transform: translate3d(-10px, 0, 0);
          transform: translate3d(-10px, 0, 0);
        }

        20%,
        40%,
        60%,
        80% {
          -webkit-transform: translate3d(10px, 0, 0);
          transform: translate3d(10px, 0, 0);
        }
      }
      p.center {
        color: #fff;
        font-family: "Microsoft YaHei";
      }
    </style>

  </head>
  <body>
    <div class="htmleaf-container">
      <div id="wrapper" class="login-page">
        <div id="login_form" class="form">
          <form class="register-form">
            <input type="text" placeholder="用户名" id="r_user_name" />
            <input type="password" placeholder="密码" id="r_password" />
            <input type="text" placeholder="电子邮件" id="r_emial" />
            <button id="create">创建账户</button>
            <p class="message">已经有了一个账户? <a href="#">立刻登录</a></p>
          </form>
          <form class="login-form">
            <input type="text" placeholder="用户名" id="user_name" />
            <input type="password" placeholder="密码" id="password" />
            <button id="login">登　录</button>
            <p class="message">还没有账户? <a href="#">立刻创建</a></p>
          </form>
        </div>
      </div>
    </div>

    <!-- 引入jquery这个JavaScript库 -->
    <script src="./lib/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
      function check_login() {
        var name = $("#user_name").val();
        var pass = $("#password").val();

        $.ajax({
          type: "POST",
          url: "http://localhost:8090/demologin/login",
          data: { username: name, password: pass },
          success: function (res) {
            console.log(res);
            if (res === "登录成功") {
              // alert(res);
              $("#user_name").val("");
              $("#password").val("");
              //TODO

            } else {
              $("#login_form").removeClass("shake_effect");
              setTimeout(function () {
                $("#login_form").addClass("shake_effect");
              }, 1);
            }
          },
        });
      }

      function check_register() {
        var name = $("#r_user_name").val();
        var pass = $("#r_password").val();
        var email = $("r_email").val();
        
        $.ajax({
          type: "POST",
          url: "http://localhost:8090/demologin/RegisterServlet",
          data: { username: name, password: pass },
          success: function (res) {
            console.log(res);
            if (res === "注册成功") {
              alert(res);
              $("#user_name").val("");
              $("#password").val("");
               //TODO

            } else {
              alert(res);
              $("#login_form").removeClass("shake_effect");
              setTimeout(function () {
                $("#login_form").addClass("shake_effect");
              }, 1);
            }
          },
        });
      }

      $(function () {
        $("#create").click(function () {
          check_register();
          return false;
        });
        $("#login").click(function () {
          check_login();
          return false;
        });
        $(".message a").click(function () {
          $("form").animate(
            {
              height: "toggle",
              opacity: "toggle",
            },
            "slow"
          );
        });
      });
    </script>
  </body>
</html>

=======================================

测试：

一个java开发

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Javaweb8==实现前后端分离的登录注册功能。前端html+ajax

后端如前两篇写的。前端从网上扒了一篇前端页面，使用的是jQuery这个JavaScript库，用它来简化对DOM和BOM的操作。想用ajax技术发起HTTP请求并获取响应，所以采用了jQuery提供的方法实现ajax技术。 ========================================= ajax技术只是一种发起HTTP请求的技术概念，除了用jQuery这个库实现ajax技术，也可以用其他技术实现。...
复制链接

扫一扫