一.前端需要的一些基本概念
1.CSS绝对定位 : 就是一种覆盖的效果 ,多个div可重叠 ,那么对于作用域范围最大的那个div的定位 ,也可作用到其它div中
这是不加绝对定位的,说明对wrapper的边距定位不生效
这是
这是加了绝对定位的
2.背景图片 : 之前一直很搞不懂背景图片咋设置 ,这下终于懂了
body{
非常简单 ,就是对块作用域中 设置background属性,路径使用的是url
background-size: cover;
background: url('img/bg.jpg');
}
3.去除下划线 : 主要是去除< a >标签的下划线 #foot a{text-decoration: none;}
二.Ajax重要方法和基本概念
概念 : Ajax是一种组合技术 ,不是单纯由一种技术构成的,
其中包含了JavaScript , HTML+CSS , XML等等
最突出的特点就是异步传输
同步与异步的区别 : 同步也就是俗称的one by one ,一个接着一个处理
而所谓的异步 ,就是在处理一项业务的时候 ,还能同时进行其它业务, 比如在用户登录的时候 ,还能进行其它操作
背景 : Ajax与登录的关系 ,采用异步处理 ,能让我们在登录的时候 ,万一密码输入错误 ,可能会导致输入框清空 ,用户需要从头到尾再打一遍账号密码的尴尬局面 ,因此 ,在提高用户体验上 ,Ajax的作用至关重要
XMLHttpRequest对象 : 该对象是实现Ajax异步的JavaScript对象
responseText属性 : 只读属性 ,用于接收HTTP响应的文本内容 (在本文是被用于接收print传输来的status属于来判断账号密码是否正确)
readyState , 是XMLHttpRequest对象的一个属性 , 用于标记需要信息是否完全被接收到 (4表示完全被接收到了)
[其实,拿来当工具类就可以了]
模拟代码
//登录页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body{
background-size: cover;
background: url('img/bg.jpg');
}
#wrapper{
position: absolute; /**可重叠*/
top :200px;
left :900px;/**与页面边界的边距*/
background-color: #fff;
width:400px;
height:300px;
text-align: center;
}
input[type="text"],input[type="password"]{
width:270px;
height:35px;
border-radius: 3px;
margin:10px 0;
border: 1px solid #aaa;
}
input[type="button"]{
background-color: #86ce2f;
width:270px;
height: 40px;
color:#fff;
font-size: 18px;
margin-top: px;
border: 0px;
}
#tittle{
font-size:24px;
color:#666;
height:60px
line-height:60px
}
#info{
color:red;
height: 10px;
}
#foot{
font-size: 14px;
margin-top: 10px;
padding-right: 70px;
text-align: right;
}
#foot a{
text-decoration: none; /**去除下划线*/
}
</style>
<script>
function valid(){//请求部分
var username = document.getElementById("username").value;
var pwd = document.getElementById("pwd").value;
var infoDiv = document.getElementById("info");
if(username==''){
infoDiv.innerHTML = "用户名不能为空";
}else if(pwd ==''){
infoDiv.innerHTML = "密码不能为空";
}else{
//使用Ajax异步请求后台
//创建XMLHttpRequest对象
var req = new XMLHttpRequest();
//打开通道 ,三个方法method ,url(后台servlet),model(true表示异步)
req.open("post","LoginServlet",true);
//请求头 : 标识http报文的类型
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送 把数据发给后台 open的第一个参数是get的话,send的参数为null
req.send("username="+username+"&pwd="+pwd);//执行这句后,state变为2
//再使用Ajax去接受服务器(后台)响应 ,在readyState为4的时候去接收响应文本
req.onreadystatechange = function(){
//↑原来监听readyState的状态 ,一旦状态改变,函数就会调用
if(req.readyState==4){
//可以接受响应文本了
var res = req.responseText;
if(res =='0'){
infoDiv.innerHTML = "用户名或密码错误!";
}else if(res =='1'){
//登陆成功,跳转去主页
location.href="main.jsp";//用于页面跳转
}
}
}
}
}
</script>
</head>
<body>
<!--
css中的定位, 绝对定位 ,position:absolute (依赖父类定位,元素会重叠)
之前学的 都是a标签传值 ,form表单传值 ,会发生页面跳转 ,降低用户体验
-->
<div id="wrapper">
<div id="tittle">
账号密码登录
</div>
<div id="info">
</div>
<form action="" enctype="application/x-www-form-urlencoded">
<input type="text" placeholder="用户名" name="" id="username">
<input type="password" placeholder="密码" name="" id="pwd">
<input type="button" onclick="valid()" value="登录">
</form>
<div id="foot">
<a href="">忘记密码</a>
<a href="">注册账号</a>
<a href="">反馈</a>
</div>
</div>
</body>
</html>
//servlet
package com.hzyc.lesson.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class LoginServlet
*/
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public LoginServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String username = request.getParameter("username");
String pwd = request.getParameter("pwd");
System.out.println(username+"-"+pwd);
int status = 0;//0表示登录失败 ,成功后设置为1
//收到请求后 ,连接数据库进行密码比对
if(username.equals("tt")&&pwd.equals("123456")) { //这里就不连接了,直接写死
status=1;
}
//给前台返回 登录是否成功
//登录成功后 ,设置session
//如果失败 ,得返回 response
PrintWriter out = response.getWriter();//能够获取到一个具有输出功能的流
out.print(status);
//强制刷新 (带有缓冲区,只有在满了以后才输出,所有用一个强制刷新,强行输出)
out.flush();
//关闭流
out.close();
}
}
本文地址:https://blog.csdn.net/qq_45596525/article/details/107528007
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!
网友评论