The back end is as written in the previous two articles.
The front end picked up a front-end page from the Internet and used the JavaScript library jQuery to simplify the operation of DOM and BOM. I want to use ajax technology to initiate HTTP requests and get responses, so I use the method provided by jQuery to implement Ajax technology.
=========================================
ajax technology is just a technical concept of initiating HTTP requests. In addition to using jQuery library to implement ajax technology, it can also be implemented with other technologies.
For example, ajax technology is implemented in a native way. Refer to the following: Native way to achieve Ajax technology - 15 little brother - blog Garden 1: what is Ajax? Ajax: asynchronous JavaScript and XML, which are used to complete the function of local refresh of web pages (only local refresh is used to modify a small amount of data without reloading the whole web page); Functions of XML: 1. It is used for data transmission, but JS is now used
https://www.cnblogs.com/wanghj-15/p/10969495.html jQuery, a JavaScript library, wraps these native operations.
==================================================
AJAX is not the only technology to initiate HTTP requests, but also other technologies. For example, the browser comes with a DOM object called XMLHttpRequest. You can initiate a request by writing JavaScript code to call the method of this object. For other methods, refer to:
Several ways for the front end to send http requests_ LV0720 blog - several ways for CSDN blog front end to send http 1. XMLHttpRequest2. ajax3. axios4. fetch1. XMLHttpRequest all modern browsers have built-in XMLHttpRequest objects, and IE5 and IE6 use ActiveX objects. var xmlHttp; if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else{ xmlHttp = new ActiveXObject(); } xmlHttp.open(m
https://blog.csdn.net/LV0720/article/details/106146484======================================================================
The jQuery library provides a method to implement ajax technology. The name of this method is easily confused, which is called ajax (). The calling process of this method is to first introduce the jQuery library, first download the officially provided js file on the jQuery official website, and add the following sentence to the HTML page:
<script src="./lib/jquery.js" type="text/javascript"></script>
Then use: write another one in the HTML page script tag, which can be written according to the syntax officially provided by jQuery. The usage syntax given by the officially provided API is jQuery.ajax([settings]). See the description on the official website for details. As follows:
jQuery.ajax() | jQuery API Documentationhttps://api.jquery.com/jquery.ajax/#jQuery-ajax-url-settings
However, the description on the official website is not detailed enough. Please refer to the w3c tutorial
JQuery - Introduction to Ajax
https://www.w3school.com.cn/jquery/jquery_ajax_intro.asp =================================================================
The following is the complete structure and code of the front-end page: jquery.js is directly downloaded from the jQuery official website, and then changed to this name for easy viewing
Login registration interface code:
<!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 Implementation of login registration form code</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="user name" id="r_user_name" />
<input type="password" placeholder="password" id="r_password" />
<input type="text" placeholder="E-mail" id="r_emial" />
<button id="create">Create account</button>
<p class="message">You already have an account? <a href="#"> log in now</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="user name" id="user_name" />
<input type="password" placeholder="password" id="password" />
<button id="login">Ascend record</button>
<p class="message">No account yet? <a href="#"> create now</a></p>
</form>
</div>
</div>
</div>
<!-- introduce jquery this JavaScript library -->
<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 === "Login succeeded") {
// 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 === "login was successful") {
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>
=======================================
Test:
