jQuery
1.jQuery动画（了解）
jQuery中众多的动画与特效方法为提高页面的用户体验度带来了极大的方便，通过少量的几行代码，就可以实现元素的飞动、淡入淡出等动画效果，还可以自定义各种动画效果。
1.1 显示与隐藏
案例：实现对段落的显示和隐藏的控制show(),hide()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn").toggle(
function(){
//$("img").hide("slow");
$("img").hide(5000);
},
function(){
//$("img").show("fast");
$("img").show(5000);
}
);
})
</script>
</head>
<body>
<button id="btn">显示和隐藏</button>
<br />
<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
</body>
</html>
1.2 滑动
要实现元素的滑动效果，需要调用jQuery中的两个方法，一个是slideDown()，另一个是slideUp()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn").toggle(
function(){
$("img").slideUp(5000);
},
function(){
$("img").slideDown(5000);
}
);
})
</script>
</head>
<body>
<button id="btn">滑动</button>
<br />
<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
</body>
</html>
1.3 淡入淡出
show()和hide()方法与fadeIn()和fadeOut()方法相比较，相同之处是都切换元素的显示状态，不同之处在于，前者的动画效果使用元素的width与height属性都发生了变化，而后者仅是改变元素的透明度，并不修改其他属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn").toggle(
function(){
$("img").fadeOut(5000)
},
function(){
$("img").fadeIn(5000);
}
);
})
</script>
</head>
<body>
<button id="btn">淡入淡出</button>
<br />
<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
</body>
</html>
案例：控制图片的淡入淡出
fadeIn()和fadeOut()方法通过动画效果，改变元素的透明度切换元素显示状态，其透明度从0.0到1.0淡出或从1.0到0.0淡入，从而实现淡入淡出的动画效果；如果要将透明度指定到某一个值，则需要调用fadeTo()方法
案例：控制图片的透明度
为下拉列表绑定change事件，获取选中的值，将这个值作为图片的透明度 fadeTo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.divFrame {
border: solid 1px #666;
width: 197px;
text-align: center;
}
.divFrame .divTitle {
background-color: #eee;
padding: 5px 0px 5px 0px
}
.divFrame .divContent {
padding: 5px 0px 5px 0px
}
.divFrame .divContent img {
border: solid 1px #eee;
padding: 2px;
width: 120px;
height: 120px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.2.js">
</script>
<script type="text/javascript">
$(function() {
$("#Select1").change(function(){
var v = $(this).val();
//3000毫秒将透明度变化为v
$("img").fadeTo(3000,v);
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<select id="Select1">
<option value="0.2">0.2</option>
<option value="0.4">0.4</option>
<option value="0.6">0.6</option>
<option value="0.8">0.8</option>
<option value="1.0" selected="selected">1.0</option>
</select>
</div>
<div class="divContent">
<img src="../img/波多野结衣.jpg" alt="" title="风景图片" />
</div>
</div>
</body>
</html>
1.4 自定义动画
上面的动画效果都是元素局部属性发生变化，如高度、宽度、可见性等。在jQuery中，也允许用户自定义动画效果，通过使用animate()方法，可以制作出效果更优雅、动作更复杂的页面动画效果
实现效果：
当点击图层的时候，图层的宽度变为200px,高度为100px
字体大小为50px，共经历3秒完成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.divFrame {
border: solid 1px #ccc;
background-color: #eee;
width: 60px;
height: 60px;
font-size: 13px;
padding: 5px
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.2.js">
</script>
<script type="text/javascript">
$(function() {
/**
* 当点击图层的时候，图层的宽度变为200px,高度为100px，共经历3秒完成
* 完成后，将字体大小设置为50px，
*/
$("div").click(function(){
$(this).animate(
{
"width":"200px",
"height":"100px"
},
3000,
function(){
$(this).css("font-size","50px");
}
);
})
})
</script>
</head>
<body>
<div class="divFrame">
点击变大
</div>
</body>
</html>
2.Ajax
首先，我们分成两部分来学习
第一，是加载获取服务端的数据 – xxx.js/xxx.json/xxx.xml
第二，是给服务端传递客户端的数据以及获取服务端的数据
2.1 加载整个html页面-load方法
在jQuery中，使用load()方法可以轻松实现获取异步数据的功能
语法：load(url, [data], [callback])
参数url为被加载的页面地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value。另一个可选项[callback]参数表示加载成功后，返回至加载页的回调函数
案例：使用load加载数据-load方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#manager").load("page.html");
})
})
</script>
</head>
<body>
<button id="btn">加载页面</button>
<div id="manager"></div>
</body>
</html>
page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>页面~~~</h1>
</body>
</html>
2.2 getJSON
虽然使用load()方法可以很快地加载数据到页面中，但有时我们需要只是部分数据
为了解决这个问题，我们采用将要获取的数据另存为一种轻量极的数据交互格式，即JSON文件格式
getJSON(url, [data], [callback])
参数url表示请求的地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value。另外一个可选项[callback]参数表示加载成功时执行的回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.getJSON("new_file.json",function(data){
var v = "";
for(var i = 0;i<data.length;i++){
var name = data[i].name;
var age = data[i].age;
v += (name + " -- " + age + " ");
}
$("#manager").text(v);
})
})
})
</script>
</head>
<body>
<button id="btn">加载json</button>
<div id="manager"></div>
</body>
</html>
new_file.json
[{"name":"刘湘","age":18},{"name":"张子琦","age":23}]
2.3 getScript()
除通过全局函数getJSON获取JSON格式的文件内容外，还可以通过另外一个全局函数getScript()获取JS文件的内容
案例：将上述的代码抽取到一个js中，然后来加载js实现数据的加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.getScript("new_file.js");
})
})
</script>
</head>
<body>
<button id="btn">加载js</button>
<div id="manager"></div>
</body>
</html>
new_file.js
$.getJSON("new_file.json",function(data){
var v = "";
for(var i = 0;i<data.length;i++){
var name = data[i].name;
var age = data[i].age;
v += (name + " -- " + age + " ");
}
$("#manager").text(v);
})
2.4 异步加载XML文档
在日常的页面开发中，有时也会遇到使用XML文档保存数据的情况，对于这种格式的数据，jQuery中使用全局函数$.get()进行访问，其调用的语法格式为：
jQuery.get(url, [data], [callback], [type])
参数url表示等待加载的数据地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value，可选项[callback]参数表示加载成功时执行的回调函数，可选项[type]参数表示返回数据的格式，如HTML、XML、JS、JSON、TEXT
案例：通过get来获取XML文件的数据，并遍历展示数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.get("new_file.xml",function(data){
var v = "";
//解析xml文档，获取student标签，并遍历
$(data).find("student").each(function(){
//获取student标签内的各个数据
var name = $(this).find("name").text();
var age = $(this).find("age").text();
v += (name + " -- " + age + " ");
})
$("#manager").text(v);
})
})
})
</script>
</head>
<body>
<button id="btn">加载xml</button>
<div id="manager"></div>
</body>
</html>
new_file.xml
<students>
<student>
<name>刘湘</name>
<age>18</age>
</student>
<student>
<name>张子琦</name>
<age>23</age>
</student>
</students>
3.前后端分离(重要)
传统开发的缺陷：
1.前端无法单独调试, 开发效率低
2.前后端耦合性太强
3.JSP由于本身属于Servlet, 需要将JSP代码转为Java代码, 再编译成浏览器能识别的html语言, 本身运行速度慢, 并且并发能力差
4.后端开发不能专注逻辑还要开发页面
5.传统开发模式不适用于分布式架构, 云架构, 微服务架构等
前后端分离开发的优点：
前端: 负责View和Controller层(页面展示, 数据渲染和页面跳转)
后端: 只负责Model层, 业务/数据处理（service/mapper）前后端各司其职, 均可独立测试, 提升开发效率
提升响应速度(前后端可采用node.js采用异步数据交互, 可由node.js统一代理发送请求)
性能提升(采用node.js作为中间层, 将页面所需要的多个后端数据直接在内网阶段就拼接好, 在统一发送给前 端UI得到更好的性能)
可适用于分布式架构, 云架构, 微服务架构等
Ajax：异步的JavaScript和XML，用于完成网页局部刷新功能（修改少量数据只用局部刷新，不用再整个网页重新加载）；
XML的作用：
1.是用于数据传输，但现在都不使用JSON
2.用于存取数据（已经不用），被数据库取代
3.用于写配置文件，现在还在少量使用，逐渐被注解取代
注意：Ajax请求不能写跳转（1.会报错。2.把跳转的页面当作字符串传回去）
3.1 跟服务端进行交互
前面都只是单纯获取到数据，现在我们需要客户端也可以给服务端传递数据
前后端分离思想，前端使用html+ajax
前后端分离处理：前端------（数据）-----服务端----（数据）-----前端-----动态改变页面的内容
3.2 get方法
以json的方式向后端传递数据
案例：用户名的唯一校验
需要导包jQuery，不需要http对象了
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
${msg}
<h1>注册页面</h1>
<form action="student?action=doRegister" method="post" enctype="multipart/form-data">
账号：<input type="text" name="username" id="username"/><span id="usernameInfo"></span><br/>
密码：<input type="password" name="password"/><br/>
姓名：<input type="text" name="name"/><br/>
年龄：<input type="text" name="age"/><br/>
性别：
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman"/>女
<br/>
爱好：
<input type="checkbox" name="hobbies" value="football"/>足球
<input type="checkbox" name="hobbies" value="basketball"/>篮球
<input type="checkbox" name="hobbies" value="shop"/>购物
<br/>
上传头像：<input type="file" name="photo"/><br/>
籍贯：
<select id="province" name="province">
<option value="xxx">-- 请选择 --</option>
</select>省
<select id="city" name="city">
<option value="xxx">-- 请选择 --</option>
</select>市
<br/>
<input type="submit" value="注册"/>
<input type="button" value="返回" οnclick="goWelcome()"/>
</form>
<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function goWelcome() {
window.location = "welcome.html";
}
$(function (){
$("#username").blur(function (){
let v = $(this).val();//获取里面的value值
if (v.length != 0){
$.post(
"student?action=isRegister",//请求地址
{"username":v},//传参
function (data){//回调函数
if (data == "1"){
$("#usernameInfo").css("color","green");
$("#usernameInfo").text("恭喜，账号可用");
}else if (data == "-1"){
$("#usernameInfo").css("color","red");
$("#usernameInfo").text("抱歉，账号已被注册");
}
}
);
}
})
function showProvince(){
$.get( //post和get是一样的操作
"province",//路径
{"action":"getProvinces"}, //传给后端的数据
function (data){//后端传过来的数据，放在data里面
let provinceArr = eval(data);//解析json数据
//放在页面上展示
for (let i = 0;i<provinceArr.length;i++){
let code = provinceArr[i].code;
let name = provinceArr[i].name;
let option = $("<option></option>");
$(option).val(code);
$(option).text(name)
$("#province").append(option)
}
}
)
}
showProvince();
$("#province").change(function (){
let v = $(this).val();
if (v == "xxx"){
$("#city").html("<option value='xxx'>-- 请选择 --</option>");
}else{
$.get(
"province",
{"action":"getCities","code":v},//传参数
function (data){
//先清空城市列表
$("#city").html("");
//解析json数据
let cityArr = eval(data);
for (let i = 0;i<cityArr.length;i++){
let code = cityArr[i].code;
let name = cityArr[i].name;
let option = $("<option></option>");
$(option).val(code);
$(option).html(name);
$("#city").append(option);
}
}
)
}
})
})
</script>
</body>
</html>
注册：StudentController
package com.qf.controller;
@WebServlet("/student")
public class StudentController extends BaseServlet {
private StudentService studentService = new StudentServiceImpl();
public void isRegister(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
boolean register = studentService.isRegister(username);
String code;
if(register){
code="1";
}else {
code="-1";
}
response.getWriter().write(code);
}
}
省市：ProvinceController
package com.qf.controller;
@WebServlet("/province")
public class ProvinceController extends BaseServlet {
private ProvinceService provinceService=new ProvinceServiceImpl();
public void getProvinces(HttpServletRequest request, HttpServletResponse response) throws IOException {
String provinces = provinceService.getProvinces();
response.getWriter().write(provinces);
}
public void getCities(HttpServletRequest request, HttpServletResponse response) throws IOException {
String cities = provinceService.getCities(request);
response.getWriter().write(cities);
}
}
3.3 post方法
案例：用户登录成功后，详情页面展示数据
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>Title</title>
</head>
<body>
<button οnclick="safeExit()">安全退出</button>
<h1>详情页面</h1>
<h1 id="pageInfo"></h1> //欢迎xxx
<img id="photo" width="100px" height="100px"><br>
<a href="resetPassword.jsp">修改密码</a>
<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function safeExit(){
window.location = "user?action=doLoginOut";
}
$.post(
"user", //异步请求的地址
{"action":"getUser"}, //异步请求的数据，controller层接收
function(data){ //异步请求成功后的回调函数（data是后端传回来的数据）
let user=eval("("+data+")").user;
let role=eval("("+data+")").role;
let name=user.name;
let photo=user.photo;
if (role == "student"){
$("#pageInfo").text("欢迎" + name + "学生进入到学生管理系统");
}else if (role == "teacher"){
$("#pageInfo").text("欢迎" + name + "老师进入到学生管理系统");
}
$("#photo").attr("src",photo);
}
)
</script>
</body>
</html>
UserController
登录成功后，从服务器内部的session里获取数据，并转成JSON字符串，传给前端
JSON.toJSONString：将java对象转成JSON字符串
package com.qf.controller;
@WebServlet("/user")
public class UserController extends BaseServlet {
private UserService userService = new UserServiceImpl();
public void getUser(HttpServletRequest request,HttpServletResponse response) throws IOException {
User user = (User) request.getSession().getAttribute("user");//获取数据
//将java对象转成JSON字符串
String userJSONStr = JSON.toJSONString(user);
String role = (String) request.getSession().getAttribute("role");
String jsonStr = "{'role':'" + role + "','user':" + userJSONStr + "}";
response.getWriter().write(jsonStr);
}
}
UserServiceImpl
package com.qf.service.impl;
public class UserServiceImpl implements UserService {
@Override
public String login(HttpServletRequest request, HttpServletResponse response) {
//获取请求中的数据
String username = request.getParameter("username");
String password = request.getParameter("password");
String userCode = request.getParameter("userCode");
String rememberMe = request.getParameter("rememberMe");
String role = request.getParameter("role");
//从Session对象中获取系统的验证码
String sysCode = (String) request.getSession().getAttribute("sysCode");
if(sysCode.equalsIgnoreCase(userCode)){//验证码正确
User user = null;
if("student".equals(role)){
user = studentMapper.getStudent(username,password);
}else if("teacher".equals(role)){
user = teacherMapper.getTeacher(username,password);
}
if(user != null){//登录成功
//判断是否记住我
if(rememberMe != null){
rememberMe(response,user.getUsername(),user.getName() ,role,user.getPhoto());
}
//将数据存储到Session中
HttpSession session = request.getSession();
session.setAttribute("user",user);
session.setAttribute("role",role);
return "1";
}else{//登录失败 -- 账号或密码错误
return "-1";
}
}else{//登录失败 - 验证码错误
return "-2";
}
}
}
3.4 $.ajax()方法
除了可以使用get()、post()实现页面的异步调用和与服务器交互数据外，还有一个功能更为强悍的最底层的方法$.ajax()，该方法不仅可以方便地实现上述的功能，更多地关注实现过程中的细节
注意：get()、post()都是$.ajax()实现的
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
3.4.1 serialize()序列化表单
可能之前有过这种情况：客户端将表单信息通过获取到表单项的值，再把这些值进行拼接，再将拼接好的字符串发送到服务端；现在可以使用serialize()来对表单信息进行自动拼接，serialize方法的出现使得可以不用获取每个表单项就可以拿到拼接好的字符串
返回值:String serialize()：解决表单传参数过多的问题（表单里所有的都必须要有name属性），serialize()可以对表单中的数据进行拼接
它的格式是[ {name:‘key1’,value:‘value1’},{name:‘key2’,value:'value2} ]的数组
需要用到json类型数据的话，需要对这个数组再做处理：循环数组，抽取元素，转为对象格式
在展示数据列表可以用
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>登录页面</h1>
<!--action="user?action=doLogin" method="post" -->
<form id="loginForm"> <!-- 设置一个id，用jQuery版本的ajax异步提交 -->
账号：<input type="text" name="username"/><br/>
密码：<input type="password" name="password"/><br/>
验证码：<input type="text" name="userCode"/><img src="user?action=doDrawCode" width="120px" height="30px" οnclick="refresh()"><a href="#" οnclick="refresh()">刷新</a><br/>
记住我：<input type="checkbox" name="rememberMe"/><br/>
角色：
<select name="role">
<option value="student">学生</option>
<option value="teacher">老师</option>
</select>
<br/>
<input id="loginBtn" type="button" value="登录"/> <!-- 改一下，不用提交 -->
<input type="button" value="返回" οnclick="goWelcome()"/>
</form>
<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function goWelcome(){
window.location = "welcome.html";
}
img = document.getElementsByTagName("img")[0];
function refresh(){
img.src = "user?action=doDrawCode&" + new Date();
}
$(function (){
$("#loginBtn").click(function (){
$.ajax(
{
type:"post", <!-- 请求方式 -->
url:"user?action=doLogin", <!-- url路径 -->
data:$("#loginForm").serialize(), <!-- 发送给服务器的数据 -->
async:true, <!-- 是否异步 -->
<!--服务器正常响应的回调函数，参数就是服务器返回的数据-->
success:function (data){
if (data == "1"){
window.location = "index.jsp";
}else if (data == "-1"){
alert("登录失败 -- 账号或密码错误");
}else if (data == "-2"){
alert("登录失败 -- 验证码错误");
}
}
}
)
})
})
</script>
</body>
</html>
UserController
接收userService层的login功能中的状态码，并传回给前端
package com.qf.controller;
@WebServlet("/user")
public class UserController extends BaseServlet {
private UserService userService = new UserServiceImpl();
public void doLogin(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException {
String login = userService.login(request, response);
response.getWriter().write(login);
}
}
UserService
返回值使用string类型
public interface UserService {
public void drawCode(HttpServletRequest request, HttpServletResponse response);
public String login(HttpServletRequest request, HttpServletResponse response);
public void rememberMe(HttpServletResponse response,String username,String name,String role,String photo);
public void loginOut(HttpServletRequest request, HttpServletResponse response);
public boolean resetPassword(HttpServletRequest request, HttpServletResponse response);
}
UserServiceImpl
返回状态码
package com.qf.service.impl;
public class UserServiceImpl implements UserService {
private StudentMapper studentMapper = new StudentMapperImpl();
private TeacherMapper teacherMapper = new TeacherMapperImpl();
@Override
public String login(HttpServletRequest request, HttpServletResponse response) {
//获取请求中的数据
String username = request.getParameter("username");
String password = request.getParameter("password");
String userCode = request.getParameter("userCode");
String rememberMe = request.getParameter("rememberMe");
String role = request.getParameter("role");
//从Session对象中获取系统的验证码
String sysCode = (String) request.getSession().getAttribute("sysCode");
if(sysCode.equalsIgnoreCase(userCode)){//验证码正确
User user = null;
if("student".equals(role)){
user = studentMapper.getStudent(username,password);
}else if("teacher".equals(role)){
user = teacherMapper.getTeacher(username,password);
}
if(user != null){//登录成功
//判断是否记住我
if(rememberMe != null){
rememberMe(response,user.getUsername(),user.getName() ,role,user.getPhoto());
}
//将数据存储到Session中
HttpSession session = request.getSession();
session.setAttribute("user",user);
session.setAttribute("role",role);
return "1";
}else{//登录失败 -- 账号或密码错误
return "-1";
}
}else{//登录失败 - 验证码错误
return "-2";
}
}
}
注意：
1.在常用方式中，点击的登录按钮的type为"submit"类型，此处为button类型
2.在常用方式中，form的action不为空,此处为空
3.ajax方式中需要注意的是$.ajax方法中的参数：dataType和data
4.data可以使用.serialize序列化提交
总结
1.jQuery
动画 – 了解即可
Ajax – 重点
扫一扫
1309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
