Javaweb8==实现前后端分离的登录注册功能。前端html+ajax
后端如前两篇写的。
前端从网上扒了一篇前端页面,使用的是jQuery这个JavaScript库,用它来简化对DOM和BOM的操作。想用ajax技术发起HTTP请求并获取响应,所以采用了jQuery提供的方法实现ajax技术。
=========================================
ajax技术只是一种发起HTTP请求的技术概念,除了用jQuery这个库实现ajax技术,也可以用其他技术实现。
比如用原生的方式实现ajax技术,参照下文:原生方式实现Ajax技术 - 十五小哥哥 - 博客园一:什么是Ajax? Ajax:异步的JavaScript和XML,用于完成网页局部刷新功能(修改少量数据只用局部刷新,不用再整个网页重新加载); XML的作用:1.是用于数据传输,但现在都在使用JS
https://www.cnblogs.com/wanghj-15/p/10969495.html jQuery这个JavaScript库就是对这些原生操作进行了一些包装。
==================================================
发起HTTP请求的技术也不止AJAX一种,还有其他的发起技术。比如浏览器自带了一个叫做XMLHttpRequest的DOM对象,通过写JavaScript代码调用这个对象的方法可以发起请求,其他方法参考:
jQuery这个库提供了一个实现ajax技术的方法,这个方法的名字也容易让人搞混,就叫做ajax()。。。。这个方法的调用流程,首先是引入jQuery这个库,先去jQuery官网下载官方提供的js文件,在HTML页面中加入下面这句话:
<script src="https://blog.csdn.net/hebian1994/article/details/lib/jquery.js" type="text/javascript"></script>
然后是使用:在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官网下载,然后改成这个名字方便看
登录注册界面代码:
-
-
<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>
=======================================
测试:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhifbcic
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22