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

一个java开发

2024-07-16 帮助1人

后端如前两篇写的。

前端从网上扒了一篇前端页面，使用的是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代码调用这个对象的方法可以发起请求，其他方法参考：

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

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

测试：

学新通

这篇好文章是转载于：学新通技术网

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

后端如前两篇写的。

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

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

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

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

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

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

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

photoshop保存的图片太大微信发不了怎么办

photoshop扩展功能面板显示灰色怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

TikTok加速器哪个好免费的TK加速器推荐

Android 11 保存文件到外部存储，并分享文件

excel下划线不显示怎么办

微信公众号没有声音提示怎么办

excel图片置于文字下方的方法

微信运动停用后别人还能看到步数吗