JavaWeb：（练习）九、Servlet数据交互、XMLHttpRequest、JSON、AJAX、AXIOS练习
JavaWeb：（练习）九、Servlet数据交互、XMLHttpRequest、JSON、AJAX、AXIOS练习
一、练习目标
使用XMLHttpRequest、JSON、AJAX、AXIOS技术优化练习八。
练习八链接：JavaWeb：（练习）八、Servlet前端发送数据到后端练习
目标：制作一个前端登录界面，制作一个简单的web服务器，连接数据库，验证从前端界面提交的表单数据。
二、使用XMLHttpRequest、JSON、AJAX优化代码
1、目的
直接提交表单数据到后端，后端直接相应，把原网页覆盖掉，为同步请求方式。前后端分离下，使用异步方式请求，发送请求和页面操作不同步。为此使用浏览器提供的XMLHttpRequest对象，使用AJAX技术（无刷新状态更新页面，并且实现异步提交）
由于前后端是不同的代码，他们之间的数据格式并不一致，在传输数据时，数据需要一个标准统一的数据格式。JSON是轻量级的数据交换格式。
2、修改
在练习八的基础上，修改后端LoginServlet代码。将前端HTML、CSS、JavaScript代码合在一个HTML代码中，修改登陆成功后的跳转前端页面代码。
3、修改后端代码：Java-LoginServlet
package com.ffyc.webback.servlet;
import com.ffyc.webback.Dao.LoginDao;
import com.ffyc.webback.model.User;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class LoginServlet_backups1 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// System.out.println("doGet");
resp.setContentType("text/html;charset=utf-8");
// 得到表单数据
String name = req.getParameter("account");
String password = req.getParameter("password");
User user = LoginDao.getUserObject(name, password);
if (user == null) {
resp.getWriter().println("账户或密码错误");
} else {
resp.getWriter().println("登陆成功");
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// System.out.println("doPost");
resp.setContentType("text/html;charset=utf-8");
// 得到表单数据
String name = req.getParameter("account");
String password = req.getParameter("password");
User user = LoginDao.getUserObject(name, password);
if (user == null) {
resp.getWriter().println("账户或密码错误");
} else {
resp.getWriter().println("登陆成功");
}
}
}
4、修改前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登录</title>
<style type="text/css">
body{
background-image: url(img/login_bg.jpg);
background-size: 100%;
}
.box{
background-color: whitesmoke;
width: 400px;
height: 300px;
border-radius: 30px;
margin: auto;
margin-top: 200px;
text-align: center;
}
span,input{
float: left;
}
.account_label_class,.password_label_class{
margin-top: 40px;
margin-left: 40px;
}
.account_class,.password_class,.account_tips_class,.password_tips_class{
margin-top: 40px;
margin-left: 10px;
}
.submit_button_class{
width: 80px;
height: 40px;
background-color: skyblue;
border-radius: 10px;
margin-left: 160px;
margin-top: 40px;
}
</style>
<script type="text/javascript">
function login(){
var account = document.getElementById("account_id").value;
var password = document.getElementById("password_id").value;
//表单验证
//发送Ajax请求
var httpObj = new XMLHttpRequest();
httpObj.open("GET", "http://127.0.0.1:8080/WebBack/login?account=" + account + "&password=" + password, true);
httpObj.send();
httpObj.onreadystatechange = function(){
// alert();
if (httpObj.readyState == 4) {
// 接收json对象
var userObj = httpObj.responseText;
if (userObj == 0) {
document.getElementById("account_tips_id").innerHTML = "账户或密码错误";
} else {
// 在浏览器进程中存储 json 数据，关闭浏览器销毁
sessionStorage.setItem("userInfo", userObj);
location.assign("main.html");
}
}
}
}
</script>
</head>
<body>
<div class="box">
<form action="http://127.0.0.1:8080/WebBack/login" method="get" >
<span class="account_label_class">账户：</span>
<input type="text" name="account_name" id="account_id" class="account_class" />
<span class="account_tips_class" id="account_tips_id"></span>
<div style="clear: left;"></div>
<br />
<span class="password_label_class">密码：</span>
<input type="password" name="password_name" id="password_id" class="password_class" />
<span class="password_tips_class"></span>
<div style="clear: left;"></div>
<br />
<input type="button" value="登录" class="submit_button_class" onclick="login()" />
<!-- <input type="submit" value="登录" class="submit_button_class" /> -->
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function show(){
// 获取浏览器存储的 json 对象
var s = sessionStorage.getItem("userInfo");
if (s == null) {
location.replace("login.html");
return;
}
// 把 json 对象转化为 html 支持的访问对象格式
var userObj = eval("(" + s + ")");
document.getElementById("name").innerHTML = userObj.name;
document.getElementById("password").innerHTML = userObj.password;
}
</script>
</head>
<body onload="show()">
<h1>登陆后页面</h1>
账户：<span id="name"></span> <br />
密码：<span id="password"></span>
</body>
</html>
三、使用AXIOS框架优化代码
1、修改
修改前端登录页面代码，修改前端登陆成功后的页面代码。
2、修改前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登录</title>
<style type="text/css">
body{
background-image: url(img/login_bg.jpg);
background-size: 100%;
}
.box{
background-color: whitesmoke;
width: 400px;
height: 300px;
border-radius: 30px;
margin: auto;
margin-top: 200px;
text-align: center;
}
span,input{
float: left;
}
.account_label_class,.password_label_class{
margin-top: 40px;
margin-left: 40px;
}
.account_class,.password_class,.account_tips_class,.password_tips_class{
margin-top: 40px;
margin-left: 10px;
}
.submit_button_class{
width: 80px;
height: 40px;
background-color: skyblue;
border-radius: 10px;
margin-left: 160px;
margin-top: 40px;
}
</style>
<script src="js/axios.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function login(){
var account = document.getElementById("account_id").value;
var password = document.getElementById("password_id").value;
//表单验证
// 使用 axios 技术
axios.get("http://127.0.0.1:8080/WebBack/login?account=" + account + "&password=" + password)
.then( function(resp) {
if (resp.data == 0) {
document.getElementById("account_tips_id").innerHTML = "不正确";
} else {
sessionStorage.setItem("name",resp.data.name);
sessionStorage.setItem("password",resp.data.password);
location.assign("main.html");
}
})
}
</script>
</head>
<body>
<div class="box">
<form action="http://127.0.0.1:8080/WebBack/login" method="get" >
<span class="account_label_class">账户：</span>
<input type="text" name="account_name" id="account_id" class="account_class" />
<span class="account_tips_class" id="account_tips_id"></span>
<div style="clear: left;"></div>
<br />
<span class="password_label_class">密码：</span>
<input type="password" name="password_name" id="password_id" class="password_class" />
<span class="password_tips_class"></span>
<div style="clear: left;"></div>
<br />
<input type="button" value="登录" class="submit_button_class" onclick="login()" />
<!-- <input type="submit" value="登录" class="submit_button_class" /> -->
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function show(){
var name = sessionStorage.getItem("name");
var password = sessionStorage.getItem("password");
if (name == null ) {
location.replace("login.html");
return;
}
document.getElementById("name").innerHTML = name;
document.getElementById("password").innerHTML = password;
}
</script>
</head>
<body onload="show()">
<h1>登陆后页面</h1>
账户：<span id="name"></span> <br />
密码：<span id="password"></span>
</body>
</html>
6936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
