Ajax
第一章
Ajax的基本概念
发送Ajax的几种方式
Ajax的具体应用
1、jsp的内置对象（隐式对象）
jsp内置对象是指：在jsp页面中，不需要创建即可直接使用的一组对象
内置对象共有：九个
1、request（请求对象）
用于获得与请求相关的信息，执行与请求相关的操作
2、repsone（响应对象）
用于获得与响应相关的信息，执行与响应相关的操作
3、out（输出流对象）
用于将响应结果输出显示在客户端浏览器上
4、pageConttext（页面上下文）
它本身是一个作用域，存储范围仅对当前页面有效
通过它也可以产生request，session，application
5、session（会话对象）
系统会为每一个客户端分配一个会话，用于存放当前客户端的信息
6、application（全局上下文对象）
它存放的数据在整个程序启动期间有效
它对应的就是servlet里的servletContext
7、config（配置对象）
8、page(页面对象)
它指的就是当前的jsp页面
9、exception(异常对象)
它可以获得页面上的异常信息
要使用该内置对象，该页面必须要表示为错误处理页面
<%@ page contentType="text/html;charset=UTF-8" isErrorPage="true" language="java" %>
所有内置对象名称要小写
jsp页面的注释
第一种：客户端注释
<!-- 注释 -->
这种注释方式，在服务器端可见，在客户端浏览器的源代码也可以看见
不仅可以注释jsp页面代码，也可以注释xml配置文件中的代码
第二种：服务器端注释
<%-- 注释 --%>
这种注释方式，在服务器端可见，在客户端浏览器的不可见
使用注释时：，注释的内容不能包含–
2、Ajax
I、什么是ajax？
ajax技术称为“异步刷新技术”，也称为“局部刷新技术”，它可以在不提交整个页面的情况下，实现前后台的交互
II、什么是局部刷新？
在没有ajax请求之前，要更新页面上的任何数据，都必须将整个页面刷新一次才可以
有了ajax技术以后，要更新哪一块区域的数据，就只单独刷新这一小块的数据即可，其他区域的数据不用更新，这种刷新方式就是局部刷新
III、什么是异步请求？
ajax是专门用来发送异步请求的一种技术
同步请求：
客户端向服务器端发送一个请求后，必须等待请求的处理结果返回来以后，才可以向服务器发送下一个请求
翻译：想服务器发送的上一个请求还没有结束，就不能继续向服务器发送新的请求
异步请求：
客户端向服务器发送请求后，不论服务器的响应结果是否返回，都可以继续向服务器发送新的请求
异步请求的性能会比同步请求更好
IIII、ajax请求如何实现前后端交互
ajax请求要通过事件来实现前后台交互
*点击相关的事件
1、onclick---------------鼠标单击事件
2、ondblclick------------鼠标单击事件
*鼠标相关的事件
1、onmouseover-------------鼠标悬停事件
2、onmouseout--------------鼠标离开事件
3、onmousemove-------------鼠标移动事件（在指定区域鼠标移动一次触发一次）
*按键相关的事件
1、onkeydown-------------键被按下事件（先触发事件，后显示内容）
2、onKeyup-------------键弹起来的事件（先显示内容，再触发事件）
3、onKeypress----------键按下并且弹起后的事件
*值改变事件
1、onchange------------内容发生改变改变时（失去焦点时判断内容是否改变）
*焦点事件
1、onblur--------------失去焦点时触发
2、onfocus-------------获得焦点时触发
//控件.focus();让控件获得焦点
//控件.select();选中控件所有内容
*表单提交事件
1、onsumbit()----------表单提交事件（先处理提交事件，再执行页面跳转）
*窗口滚动条事件
1、window.onscroll------------滚动条滚动事件
2、document.socumentElement.scrollTop--滚动高度
3、xxx.style.display="black"---显示
4、xxx.style.display="none"----隐藏
3、如何发送ajax请求
使用jquery发送ajax很方便，它封装了一些ajax的操作
1、$.get();
------它发送ajax请求找类中的doGet方法进行处理
2、$.post();
------它发送ajax请求找类中的doPost方法进行处理
3、$.ajax();
I、 . g e t ( ) 与 .get()与 .get()与.post()
这两种发送ajax请求的用法几乎一样，只是进入的方法不一样而已
$.get()-----发送的get请求，进入的doget方法
$.post()-----发送的post请求，进入的doPsot方法
此处以$.post()为例
II、$.post()的用法
用法1:请求中携带参数
第一种语法：
$.post("请求路径？参数名=值")；
只有一个参数，即为请求路径，如果路径中要携带参数，用？连接，后面参数用&连接
示例：$.post("ajax?method=init");
$.post("ajax?method=init&id=?&name=?");
用法2：发送请求时，携带json格式的参数
json：是一种数据格式，主要是在异步请求中传递参数
json格式：{参数名1：值1,参数名2，值2...}
第二种语法：
$.post("请求路径",{参数名1：值1,参数名2，值2...})；
示例 //获得当前控件的值
let val= $(this).val();
$.post("ajax",{method:"init",name:val});
用法3：发送请求，接受后台返回的数据
ajax请求要把数据从后台返回到前台，必须要通过流的方式返回
/***********************************************/
后台返回数据：
String val = request.getParameter("name");
//设置响应编码格式，赋值乱码
response.setContentType("text/html;charset=utf-8");
//产生输出流
PrintWriter out=response.getWriter();
//返回数据到前台
out.write("后台返回的数据是："+val);
//刷新流，保证所有数据都输出
out.flush();
out.close();
/***********************************************/
接受后台返回的数据：
ajax如果有返回值，处理方式有两种：
1、编写函数直接处理
$.post("请求路径",{参数名：值},function(date){
处理返回结果的函数
})
date即为后台返回的数据
处理返回结果的函数称为”回调函数“
示例： 将文本框的值传到servlet，然后又返回到页面
//获得当前控件的值
let val= $(this).val();
$.post(" ",{method:"init",name:val},function (date) {
$("#str").html(date);
});
2、后台返回结果调用指定函数进行处理
$.post("请求路径",{参数名：值},函数名)
//函数
function(自定义参数){
代码块
}
示例：$(function () {
//给文本框关联键弹起事件
$("#name").keyup(function () {
//获得当前控件的值
let val= $(this).val();
$.post("ajax",{method:"init",name:val},callback)
})
})
//函数
function callback(date) {
$("#str").html(date);
}
4、ajax的应用
示例1：文本补全
$(function () {
//文本框的关联事件
$("#seek").keyup(function () {
//接受数据的值
let str=$(this).val();
//判断是否有内容
if (str==null||str==""){
$("#str").html("");
$("#str").removeAttr("style");
}else {
$.post("ajax",{method:"show",seek:str},function (date) {
if (date=="no"){
$("#str").removeAttr("style");
}else {
//给div增加边框
$("#str").css("border","1px solid black");
$("#str").html(date);
$("#str>p").mousemove(function () {
$(this).css("background","rgba(0,0,0,.2");
//获得当前div的内容显示在文本框中
let msg=$(this).html();
$("#seek").val(msg);
}).mouseout(function () {
$(this).css("background","white");
}).click(function () {
$("#str").html("");
$("#str").removeAttr("style");
})
}
})
}
})
})
个人感觉：除了提交一个请求，其他完全就是js在干事
示例2：注册时检查信息是否可用
<script>
$(function () {
//姓名改变事件
$("#user").change(function () {
//获取用户名
let user=$(this).val();
$.post("ajax",{method:"reg",name:user},function (date) {
if (date=="yes"){
$("#btn").removeAttr("disabled");
$("#s").html("<b style='color: green'>可用</b>");
}else {
$("#btn").attr("disabled",true);
$("#s").html("<b style='color: red'>用户名已存在</b>");
}
})
})
})
</script>
第二章
1、$.ajax方法的使用
2、$.ajax返回的json格式
3、综合应用
1、$.ajax()的使用
语法格式1：（原始标准语法）
$.ajax({
url:"请求地址",
type="请求的方式",//get(增),post(删),put(改),delete(查)
date=json格式的参数,
dateType="它用于指定后台返回来的数据类型，如果不指定，默认是返回String"
success:请求成功后要调用的回调函数
error:请求失败后要调用的回调函数
});
用法1：只向后台传入数据，不接受返回结果
<script>
$(function () {
//给文本框绑定事件
$("[name='name']").keyup(function () {
//取到值
let name=$(this).val();
//发送请求
$.ajax({
url:"ajax",
type:"post",
data:{method:"test",name:name}
})
})
})
</script>
用法2：即使后台没有数据返回，也是可以指定回调函数
//它会在请求结束时调用
//发送请求
$.ajax({
url:"ajax",
type:"post",
data:{method:"test",name:name},
success:function () {
alert("请求结束！")
}
})
用法3：后台有返回结果
//发送请求
$.ajax({
url:"ajax",
type:"post",
data:{method:"test",name:name},
success:function (data) {
//将返回的数据显示在div中
$("#str").html(data);
}
})
总结
$.get(),$.post()它们可以完成的操作，$.ajax()也能实现
如果ajax请求只是简单返回string类型的数据：
一般会使用$.get()或$.post()，这种方式最简单
如果要从后台返回的是json格式的数据:
一般会使用$.ajax();
//后台要返回的数据是对象或者是集合，需要以json个格式进行返回
2、$.ajax()返回json格式的数据
后台要返回的数据是对象或者是集合，需要把它转换成json格式才可以
在java类中，要操作json需要导入json工具包
常见的json工具包：
1、Fastjson---------它是阿里巴巴开发的一个json工具包
2、Jackson--------他也是json的工具包，主要在spring中使用
使用fastjson返回对象
1、导包
2、后台操作
/****************后台*/
//指定要返回的对象
stuInfo stu=new stuInfo(id,name,score);
//返回数据
//设置响应编码格式，赋值乱码
resp.setContentType("text/html;charset=utf-8");
//产生输出流
PrintWriter out=resp.getWriter();
//将学生对象转换成json格式
String json = JSON.toJSONString(stu);
//返回json格式数据到前台
out.write(json);
/*
此时json的值为{"id":0,"name":"杰克","score":99}
*/
//刷新流，保证所有数据都输出
out.flush();
out.close();
3、在前台得到数据
/********************前台*/
$(function () {
// 绑定事件
$("#btn").click(function () {
// alert(1)
//取值
let name=$("[name='name']").val();
let score=$("[name='score']").val();
if (name==""||name==null){
name="null";
}
if (score==""||score==null){
score=0;
}
//传到后台
$.ajax({
url:"ajax",
type:"post",
data:{method:"find",name:name,score:score},
dataType:"json",
success:function (stu) {
//这个stu就相当于传进来的json
{"id":0,"name":"杰克","score":99}
//将返回的数据显示在div中
编号：stu.id+stu.name+stu.score
}
})
})
})
</script>
使用fastjson返回集合
后台
//接受前台数据
Integer id=i++;
String name=req.getParameter("name");
Integer score=Integer.parseInt(req.getParameter("score"));
//指定要返回的对象
stuInfo stu=new stuInfo(id,name,score);
//虚拟一个学生
stuInfo stu2=new stuInfo(i++,"电脑"+i,20+i);
//创建集合
List<stuInfo> list= new ArrayList();
list.add(stu);
list.add(stu2);
//返回数据
//设置响应编码格式，赋值乱码
resp.setContentType("text/html;charset=utf-8");
//产生输出流
PrintWriter out=resp.getWriter();
//将list集合转换成json格式
String json = JSON.toJSONString(list);
//此时json的值为
// [{"id":0,"name":"杰克","score":123},{"id":1,"name":"电脑2","score":22}]
//打印json
System.out.println(json);
//返回json格式数据到前台
out.write(json);
//刷新流，保证所有数据都输出
out.flush();
out.close();
前台
// 绑定事件
$("#btn2").click(function () {
//传到后台
$.ajax({
url:"ajax",
type:"post",
//返回一个对象是find请求
//返回一个集合是findAll请求
data:{method:"findAll",name:name,score:score},
dataType:"json",
success:function (list) {
/*核心*/
$.each(list,function (index,k) {
编号：k.id+k.name+k.score
})
}
})
使用fastjson返回所有类型的数据
后台
//数值类型
Integer count=100;
//字符类型
String msg="sql语句";
//对象类型
stuInfo stu= new stuInfo(1,"成功",99);
//集合类型
stuInfo stu1= new stuInfo(2,"王者",79);
stuInfo stu2= new stuInfo(3,"扬子江",90);
//存到集合中
List list=new ArrayList();
list.add(stu1);
list.add(stu2);
//将三种类型存到map集合中，然后将map转换为json
Map map=new HashMap();
map.put("count",count);//数值
map.put("msg",msg);//字符串
map.put("stu",stu);//对象
map.put("list",list);//集合
//设置响应编码格式，赋值乱码
resp.setContentType("text/html;charset=utf-8");
//产生输出流
PrintWriter out = resp.getWriter();
//将Map集合转换成json格式
String json = JSON.toJSONString(map);
//此时json的值是
{"msg":"sql语句",
"stu":{"id":1,"name":"成功","score":99},
"count":100,
"list":[{"id":2,"name":"王者","score":79},{"id":3,"name":"扬子江","score":90}]}
//返回json格式数据到前台
out.write(json);
//刷新流，保证所有数据都输出
out.flush();
out.close();
前台
// 绑定事件
$("#btn3").click(function () {
//传到后台
$.ajax({
url:"ajax",
type:"post",
data:{method:"other"},
dataType:"json",
success:function (date) {
//数值
数值：date.count
//字符串
字符串：date.msg
//对象
let obj=date.stu;
对象：obj.id+" "+obj.name+" "+obj.score);
//集合
$.each(date.list,function (index,obj) {
编号:"+obj.id
姓名:"+obj.name
成绩:"+obj.score
})
}
})
})
3、$.ajax()从前台向后台传递数据的方式
方式1：自己组装json向后台传递
这种写法只适合参数比较少的情况
//向后台传递josn格式的数据
$("#in").click(function () {
//取值
let id=$("[name='id']").val();
let name=$("[name='name']").val();
let score=$("[name='score']").val();
//传值
$.ajax({
url:"ajax",
type:"post",
data:{method:"readOne",id:id,name:name,score:score}
})
})
方式2：将数据放在表单中，将表单数据转换成json
html代码
<form id="fr">
编号：<input type="text" id="user" name="id"><br>
姓名：<input type="text" id="pwd" name="name"><br>
成绩：<input type="number" id="score" name="score"><br>
</form>
<div>
<input type="button" id="in" value="提交">
</div>
提交代码
此方法适用于参数比较多的情况
将表单序列化json
$("#in").click(function () {
$.ajax({
url:"ajax?method=readOne",
type:"post",
data:$("#fr").serialize()
//用于将表单数据转换成json格式，控件的name名会自动转换成键
})
})
4、示例
示例1：级联菜单
一个下拉列表的数据是根据另一个下拉列表数据改变而动态加载的数据
dao层代码
public List<Map<String, Object>> initProvince() {
String sql="select * from province";
return jt.queryForList(sql);
}
public List<Map<String, Object>> initCity(Integer pid) {
String sql="select * from city where pid=?";
return jt.queryForList(sql,pid);
}
public List<Map<String, Object>> initDist(Integer cid) {
String sql="select * from dist where cid=?";
return jt.queryForList(sql,cid);
}
servlet代码
//三级联动
//初始化加载省份
protected void initProvince(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
;
//获取数据的省份
List<Map<String,Object>> list=adao.initProvince();
//将list封装成json返回前台
//设置响应编码格式，赋值乱码
resp.setContentType("text/html;charset=utf-8");
//产生输出流
PrintWriter out = resp.getWriter();
//将Map集合转换成json格式
String json = JSON.toJSONString(list);
//返回json格式数据到前台
out.write(json);
//刷新流，保证所有数据都输出
out.flush();
out.close();
}
//初始化加载城市
protected void initCity(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获得省份编号
Integer pid= Integer.parseInt(req.getParameter("pid"));
//获取数据的城市
List<Map<String,Object>> list=adao.initCity(pid);
//将list封装成json返回前台
//设置响应编码格式，赋值乱码
resp.setContentType("text/html;charset=utf-8");
//产生输出流
PrintWriter out = resp.getWriter();
//将Map集合转换成json格式
String json = JSON.toJSONString(list);
//返回json格式数据到前台
out.write(json);
//刷新流，保证所有数据都输出
out.flush();
out.close();
}
//初始化加载区县
protected void initDist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获得省份编号
Integer cid= Integer.parseInt(req.getParameter("cid"));
//获取数据的城市
List<Map<String,Object>> list=adao.initDist(cid);
//将list封装成json返回前台
//设置响应编码格式，赋值乱码
resp.setContentType("text/html;charset=utf-8");
//产生输出流
PrintWriter out = resp.getWriter();
//将Map集合转换成json格式
String json = JSON.toJSONString(list);
//返回json格式数据到前台
out.write(json);
//刷新流，保证所有数据都输出
out.flush();
out.close();
}
}
js代码
<script>
$(function () {
//加载省份
$.ajax({
url:"ajax",
type:"post",
data:{method:"initProvince"},
dataType:"json",
success:function (list) {
//遍历集合
$.each(list,function (index,m) {
$("<option value='"+m.pid+"'>"+m.pname+"</option>").appendTo("#province")
})
}
})
//省份改变事件
$("#province").change(function () {
//获得选择的省份编号
let pid=$(this).val();
//清空city的列表,保留标题
$("#city")[0].options.length=1;
//清空dist的列表,保留标题
$("#dist")[0].options.length=1;
$.ajax({
url:"ajax",
type:"post",
data:{method:"initCity",pid:pid},
dataType:"json",
success:function (list) {
//遍历集合
$.each(list,function (index,m) {
$("<option value='"+m.cid+"'>"+m.cname+"</option>").appendTo("#city")
})
}
})
})
//城市改变事件
$("#city").change(function () {
//获得选择的省份编号
let cid=$(this).val();
//清空city的列表,保留标题
$("#dist")[0].options.length=1;
$.ajax({
url:"ajax",
type:"post",
data:{method:"initDist",cid:cid},
dataType:"json",
success:function (list) {
//遍历集合
$.each(list,function (index,m) {
$("<option value='"+m.did+"'>"+m.dname+"</option>").appendTo("#dist")
})
}
})
})
})
</script>
示例2：
阶段1：加载全部数据
阶段2：分页显示
阶段3：增删改
阶段4：多条件查询
阶段5：多条件查询后的分页
默认情况下，日期类型的数据在js中会以时间戳显示
方式1:把时间戳转换成日期类型
//这种是实体类中bir类型是日期类型
function showDate(time) {
//将时间戳转换成日期类型
var date=new Date(time);
var year=date.getFullYear();
var month=(date.getMonth()+1).toString().padStart(2,'0');
var day=date.getDate().toString().padStart(2,'0');
return year+"-"+month+"-"+day;
}
调用函数showDate(stu.bir);
方式2：直接把bir类型改为string类型，就不用再去转类型
第三章
继续完成第二章的示例
阶段2：分页显示数据
为了简化页面，一般在ajax中会使用分页插件
servlet代码
//获得分页信息
Integer page =Integer.parseInt(request.getParameter("page"));
Integer rows =Integer.parseInt(request.getParameter("rows"));
//计算总条数
Integer count=sdao.getCount();
//计算总页数
int maxpage=count%rows==0? count/rows : count/rows+1;
if (count<=rows){
maxpage=1;
}
//根据分页信息查询
List<stuInfo> list=sdao.init(page,rows);
//创建一map，用于封装所有的信息
Map map=new HashMap();
map.put("page",page);//当前页
map.put("rows",rows);//每页条数
map.put("count",count);//总条数
map.put("maxpage",maxpage);//总页数
map.put("list",list);//对象
//将list封装成json返回前台
//设置响应编码格式，赋值乱码
response.setContentType("text/html;charset=utf-8");
//产生输出流
PrintWriter out = response.getWriter();
//将Map集合转换成json格式
String json = JSON.toJSONString(map);
//返回json格式数据到前台
out.write(json);
//刷新流，保证所有数据都输出
out.flush();
out.close();
阶段3：增删改
1、添加与修改共用一个模态框
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
分开写太麻烦了
我直接全部复制过来
servlet代码
package com.sc.web;
import com.alibaba.fastjson.JSON;
import com.sc.dao.stuDao;
import com.sc.enty.stuInfo;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@WebServlet("/pages")
public class ajaxServlet extends BaseServlet {
stuDao sdao = new stuDao();
//在初始加载时根据分页信息进行分页
protected void init(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获得查询条件
String name=request.getParameter("name");
String gender=request.getParameter("gender");
String clazz=request.getParameter("clazz");
String score=request.getParameter("score");
//获得分页信息
Integer page = Integer.parseInt(request.getParameter("page"));
Integer rows = Integer.parseInt(request.getParameter("rows"));
//计算总条数
Integer count = sdao.getCount(name,score,gender,clazz);
//计算总页数
int maxpage = count % rows == 0 ? count / rows : count / rows + 1;
if (count <= rows) {
maxpage = 1;
}
// //根据分页信息查询
// List<stuInfo> list = sdao.init(page, rows);
//根据条件做分页查询
List<stuInfo> list = sdao.init(page, rows,name,score,gender,clazz);
//创建一map，用于封装所有的信息
Map map = new HashMap();
map.put("page", page);//当前页
map.put("rows", rows);//每页条数
map.put("count", count);//总条数
map.put("maxpage", maxpage);//总页数
map.put("list", list);//对象
//将list封装成json返回前台
//设置响应编码格式，赋值乱码
response.setContentType("text/html;charset=utf-8");
//产生输出流
PrintWriter out = response.getWriter();
//将Map集合转换成json格式
String json = JSON.toJSONString(map);
//返回json格式数据到前台
out.write(json);
//刷新流，保证所有数据都输出
out.flush();
out.close();
}
//添加与修改
protected void save(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 获取前台的值
String id = req.getParameter("id");
String name = req.getParameter("name");
String gender = req.getParameter("gender");
String clazz = req.getParameter("clazz");
Integer score = Integer.parseInt(req.getParameter("score"));
String bir = req.getParameter("bir");
//判断id是否为空，为空就新增，不为空就修改
if (id == null || id.equals("")) {
//新增
sdao.add(name, gender, clazz, score, bir);
} else {
//修改
sdao.update(name, gender, clazz, score, bir, id);
}
}
protected void findStu(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获得id
Integer id = Integer.parseInt(req.getParameter("id"));
//查询id编号的信息
stuInfo s = sdao.findId(id);
//返回学生的信息
//设置响应编码格式，赋值乱码
resp.setContentType("text/html;charset=utf-8");
//产生输出流
PrintWriter out = resp.getWriter();
//将Map集合转换成json格式
String json = JSON.toJSONString(s);
//返回json格式数据到前台
out.write(json);
//刷新流，保证所有数据都输出
out.flush();
out.close();
}
//删除数据
protected void del(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获得id
Integer id = Integer.parseInt(req.getParameter("id"));
sdao.del(id);
}
}
dao层代码
package com.sc.dao;
import com.sc.enty.stuInfo;
import com.sc.util.JdbcUtil;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import java.util.List;
public class stuDao {
JdbcTemplate jt=new JdbcTemplate(JdbcUtil.getDs());
public List<stuInfo> init(Integer page, Integer rows, String name, String score, String gender, String clazz) {
String sql="select * from stu where 1=1";
if (name!=null && !name.equals("")){
sql+=" and name like '%"+name+"%'";
}
if (clazz!=null && !clazz.equals("")){
sql+=" and clazz like '%"+clazz+"%'";
}
if (gender!=null && !gender.equals("-1")){
sql+=" and gender='"+gender+"'";
}
if (score!=null && !score.equals("-1")){
if ( score.equals("1") ){
sql+=" and score>=90";
}else if(score.equals("2")){
sql+=" and score>=80";
}else if(score.equals("3")){
sql+=" and score>=60";
}else{
sql+=" and score<60";
}
}
sql+=" limit ?,?";
//计算开始下标
int startPage=(page-1) * rows;
return jt.query(sql,new BeanPropertyRowMapper<>(stuInfo.class),startPage,rows);
}
//总条数
public Integer getCount(String name, String score, String gender, String clazz) {
String sql="select count(*) from stu where 1=1";
if (name!=null && !name.equals("")){
sql+=" and name like '%"+name+"%'";
}
if (clazz!=null && !clazz.equals("")){
sql+=" and clazz like '%"+clazz+"%'";
}
if (gender!=null && !gender.equals("-1")){
sql+=" and gender='"+gender+"'";
}
if (score!=null && !score.equals("-1")){
if (score.equals("1")){
sql+=" and score>=90";
}else if(score.equals("2")){
sql+=" and score>=80";
}else if(score.equals("3")){
sql+=" and score>=60";
}else{
sql+=" and score<60";
}
}
return jt.queryForObject(sql,Integer.class);
}
//添加数据
public void add(String name,String gender,String clazz,Integer socre,String bir){
String sql="INSERT INTO stu VALUES(null,?,?,?,?,?,null);";
jt.update(sql,name,gender,clazz,socre,bir);
}
//修改
public void update(String name, String gender, String clazz, Integer score, String bir, String id) {
String sql="update stu set name=?,gender=?,clazz=?,score=?,bir=? where id=?";
jt.update(sql,name,gender,clazz,score,bir,id);
}
public stuInfo findId(Integer id) {
String sql="select * from stu where id=?";
return jt.queryForObject(sql,new BeanPropertyRowMapper<>(stuInfo.class),id);
}
public void del(Integer id) {
String sql="delete from stu where id=?";
jt.update(sql,id);
}
}
jsp代码
<%--
Created by IntelliJ IDEA.
User: 86159
Date: 2023/4/17
Time: 14:30
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<html>
<head>
<title>用户信息</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/sweetalert2.min.css">
<link type="text/css" rel="stylesheet" href="css/pagecss.css">
<style>
table,th{
text-align: center;
}
h3{
display: inline;
}
.navbar-form{
text-align: center;
margin-bottom: 15px;
}
</style>
</head>
<body>
<%--<h1 style="text-align: center"><fmt:formatDate value="${requestScope.bir}" pattern="yyyy-MM-dd HH:mm:ss E"></fmt:formatDate></h1>--%>
<%--<fmt:formatNumber value="${requestScope.salary}" type="currency"/>--%>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1>学生管理系统</h1>
</div>
<div class="panel-body">
<div class="row">
<form class="navbar-form " method="post">
<div class="form-group ">
<h3><span class="label label-info "><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-0-circle-fill" viewBox="0 0 16 16">
<path d="M8 4.951c-1.008 0-1.629 1.09-1.629 2.895v.31c0 1.81.627 2.895 1.629 2.895s1.623-1.09 1.623-2.895v-.31c0-1.8-.621-2.895-1.623-2.895Z"/>
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.012 4.158c1.858 0 2.96-1.582 2.96-3.99V7.84c0-2.426-1.079-3.996-2.936-3.996-1.864 0-2.965 1.588-2.965 3.996v.328c0 2.42 1.09 3.99 2.941 3.99Z"/>
</svg></span></h3>
<input type="text" name="tname" value="" class="form-control search" placeholder="姓名">
</div>
<div class="form-group ">
<h3><span class="label label-warning"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hospital" viewBox="0 0 16 16">
<path d="M8.5 5.034v1.1l.953-.55.5.867L9 7l.953.55-.5.866-.953-.55v1.1h-1v-1.1l-.953.55-.5-.866L7 7l-.953-.55.5-.866.953.55v-1.1h1ZM13.25 9a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5ZM13 11.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5Zm.25 1.75a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5Zm-11-4a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 3 9.75v-.5A.25.25 0 0 0 2.75 9h-.5Zm0 2a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5ZM2 13.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5Z"/>
<path d="M5 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1a1 1 0 0 1 1 1v4h3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h3V3a1 1 0 0 1 1-1V1Zm2 14h2v-3H7v3Zm3 0h1V3H5v12h1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3Zm0-14H6v1h4V1Zm2 7v7h3V8h-3Zm-8 7V8H1v7h3Z"/>
</svg></span></h3>
<input type="text" name="tclazz" value="" class="form-control search" placeholder="班级">
</div>
<div class="form-group " >
<select class="form-control search" name="tgender" style="width: 150px;text-align: center">
<option value="-1">全部学生</option>
<option value="男">所有男生</option>
<option value="女">所有女生</option>
</select>
</div>
<div class="form-group " >
<select class="form-control search" name="tscore" style="width: 150px;text-align: center">
<option value="-1">全部结果</option>
<option value="1">优秀</option>
<option value="2">良好</option>
<option value="3">及格</option>
<option value="4">不及格</option>
</select>
</div>
<div class="form-group">
<button type="button" onclick="save(1)" class="btn btn-success btn-block">添加</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">新增学员信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal col-md-offset-3" id="frm">
<div class="form-group">
<label class="control-label col-md-2">姓名：</label>
<div class="col-md-6">
<input type="hidden" name="id" id="id" class="form-control">
<input type="text" name="name" id="name" required="required" class="form-control">
</div>
</div>
<div class="form-group">
<!-- 班级： -->
<label class="control-label col-md-2">班级：</label>
<div class="col-md-6">
<input type="text" required="required" id="clazz" name="clazz" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">性别：</label>
<div class="col-md-6">
<div class="radio" >
<label>
<input type="radio" name="gender" id="optionsRadios1" checked="checked" value="女" >
女性
</label>
<label>
<input type="radio" name="gender" id="optionsRadios2" value="男">
男性
</label>
</div>
</div>
</div>
<div class="form-group">
<!-- 成绩： -->
<label class="control-label col-md-2">成绩：</label>
<div class="col-md-6">
<input type="number" id="score" required="required" id="score" name="score" class="form-control">
</div>
</div>
<div class="form-group">
<!-- 日期： -->
<label class="control-label col-md-2">日期：</label>
<div class="col-md-6">
<input type="date" name="bir" id="bir" class="form-control">
</div>
</div>
<div class="form-group">
<!-- 按钮： -->
<div class=" col-md-offset-3 col-md-6">
<input type="button" class="btn btn-success" id="btn" value="提交">
<input type="reset" class="btn btn-primary" value="重置">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<table class="table table-striped table-hover table-bordered" id="tab">
<thead>
<tr>
<th class="col-md-1">编号</th>
<th class="col-md-2">姓名</th>
<th class="col-md-1">性别</th>
<th class="col-md-1">班级</th>
<th class="col-md-1">成绩</th>
<th class="col-md-1">结果</th>
<th class="col-md-2">出生年月</th>
<th class="col-md-2">操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="page" class="page_div"></div>
</div>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/pageMe.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/sweetalert2.min.js"></script>
<script src="js/ajax.js"></script>
</html>
js代码
//页面一加载就显示数据
$(function () {
//发送请求
$.ajax({
url:"pages",
type:"post",
data:{method:"init",page:1,rows:5},
dataType:"json",
success:show
})
//给所有类样式名称为search的组件绑定值改变事件
$(".search").change(function () {
//不论哪一个控件的值有没有改变，都取出来
let name=$("[name='tname']").val();
let clazz=$("[name='tclazz']").val();
let gender=$("[name='tgender']").val();
let score=$("[name='tscore']").val();
//发送ajax请求，根据条件加载数据
//发送请求
$.ajax({
url:"pages",
type:"post",
data:{method:"init",page:1,rows:5,name:name,clazz:clazz,gender:gender,score:score},
dataType:"json",
success:show
})
})
//给表单中的按钮关联事件
$("#btn").click(function () {
$.ajax({
url:"pages?method=save",
type:"post",
data:$("#frm").serialize(),
success:function () {
//刷新页面
window.location.reload();
}
})
})
});
//回调函数
function show(date) {
//定义变量，拼接字符串
var msg="";
$.each(date.list,function (index,s) {
msg+="<tr>";
//计算要显示的编号
// s.id
var id=index+(date.page-1)*date.rows+1;
msg+="<td>"+id+"</td>";
msg+="<td>"+s.name+"</td>";
msg+="<td>"+s.gender+"</td>";
msg+="<td>"+s.clazz+"</td>";
msg+="<td>"+s.score+"</td>";
msg+="<td>";
if (s.score>=90){
msg+="<b style='color:green'>优秀</b>";
} else if (s.score>=80) {
msg+="<b style='color:greenyellow'>良好</b>";
}else if (s.score>=60) {
msg+="<b style='color:yellow'>及格</b>";
}else {
msg+="<b style='color:red'>不及格</b>";
}
msg+="</td>";
msg+="<td>"+s.bir+"</td>";
msg+="<td>";
msg+="<button type='button' class='btn btn-info' οnclick='save(2,"+s.id+")'>修改</button> ";
msg+="<button type='button' class='btn btn-danger' οnclick='del("+s.id+")' >删除</button>";
msg+="</td>";
msg+="</tr>";
//msg的内容显示在tbody中
$("tbody").html(msg);
//分页之前也要获得查询条件
let name=$("[name='tname']").val();
let clazz=$("[name='tclazz']").val();
let gender=$("[name='tgender']").val();
let score=$("[name='tscore']").val();
// 数据渲染到tbody执行分页操作
$("#page").paging({
pageNum: date.page, // 当前页面
totalNum: date.maxpage, // 总页码
totalList: date.count, // 记录总数量
callback: function (num) { //回调函数
// 递归
//发送请求
$.ajax({
url:"pages",
type:"post",
data:{method:"init",page:num,rows:5,name:name,clazz:clazz,gender:gender,score:score},
dataType:"json",
success:show
})
}
});
})
}
function showDate(time) {
//将时间戳转换成日期类型
var date=new Date(time);
var year=date.getFullYear();
var month=(date.getMonth()+1).toString().padStart(2,'0');
var day=date.getDate().toString().padStart(2,'0');
return year+"-"+month+"-"+day;
}
//编写事件，点击显示模态框
function save(op,id) {
//op=1新增，op=2修改
if (op==1){
//如果是新增，把表单清空
$("#frm")[0].reset();
$("#myModalLabel").html("新增学员信息")
}else if(op==2){
$("#myModalLabel").html("修改学员信息")
// 当点击修改时，发出请求查询该id的所有信息
$.ajax({
url:"pages",
type:"post",
data:{method:"findStu",id:id},
dataType:"json",
success:function (stu) {
//获得后台返回的学生信息
$("#name").val(stu.name);
$("#id").val(stu.id);
$("#clazz").val(stu.clazz);
$("#bir").val(stu.bir);
$("#score").val(stu.score);
$("[value='"+stu.gender+"']").prop("checked",true);
}
})
}
//显示
$("#myModal").modal("show");
}
//删除数据
function del(id) {
//根据id删除数据
swal({
title: '你确定吗?',
text: "数据删除将无法恢复!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: '是的，删除它!',
cancelButtonText: '取消，我再想想!'
}).then((result) => {
if (result.value) {
//如果点击了确定按钮，此处代码会执行
//根据id删除数据
$.post("pages",{method:"del",id:id},function () {
swal(
'删除!',
'数据删除成功！',
'success'
);
//两秒钟之后刷新
setTimeout(function () {
//刷新页面
window.location.reload();
},2000)
})
}
});
}
大功告成！
一个基于ajax的增删改查功能就全部实现了
展示
初始化加载…（数据库的数据我是用格式化添加的，就是弄个for循环200次执行添加操作）
添加
添加成功
修改
（数据会回显在表单中）
删除
查询（姓刘 且成绩优秀）
结束（end）
Echarts图标组件
1、什么是echarts
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
2、使用echarts步骤
官网地址：https://echarts.apache.org/handbook/zh/get-started/
1、下载echarts
2、创建工程，导入jquery.js，echarts.js
3、在jsp页面放一个div用于显示图表
<div style="width: 500px;height: 500px"></div>
基本结构
$(function () {
//1、获取div组件初始化（注意：组件必须是dom才能完成初始化）
let div=echarts.init(document.getElementById("#mydiv"));
//2、设置图表的相关样式
let option={
};
//3、将图表属性与图表组件相关联
echart.setOption(option);
})
在option中设置具体的图表样式
必须要设置的三个参数
xAxis------用于指定柱状图的x轴
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
}
yAxis-----用于设置显示y轴的数值
yAxis：{
//默认值即可
}，
series-----用于设置要现实的数据
series:[{
//指定图表名
name:"销售数据"
//指定图表类型
type:"bar",//bar柱状图，pic饼图，line折线图
//指定要显示的数据(xaxis指定了几个名称，就要有几个值)
date:[20,90,30,10,80,50]
}]
最简单的示例：
//2、设置图表的相关样式
let option={
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
},
series: [{
//指定图表名
name:"销售数据",
//指定图表类型
type:"bar",//bar柱状图，pie饼图，line折线图
//指定要显示的数据(xaxis指定了几个名称，就要有几个值)
data:[20,90,30,10,80,50]
}]
};
下列属性为可选属性：
//2、设置图表的相关样式
let option={
//设置图表的标题
title:{
//标题内容
text:"商品销售数据",
//子标题
subtext:"统计人：rajuna",
//对齐方式
x:"left"
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
},
series: [{
//指定图表名
name:"销售数据",
//指定图表类型
type:"bar",//bar柱状图，pie饼图，line折线图
//指定要显示的数据(xaxis指定了几个名称，就要有几个值)
data:[20,90,30,10,80,50]
}],
//鼠标悬停时，提示信息
tooltip:{
},
//指定颜色说明(该属性要生效，需要与图表名保持一致)
legend:{
data:['销售数据'],
x:"center"//对齐方式
},
//工具栏
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
};
简直是宝藏工具哇
第四章
1、echarts图表组件的使用
开发中最常见的图表：
1、柱状图（柱状图需要三个属性）
2、饼图（饼图只有一个属性是必须要设置的）
饼状图的静态展示（基本结构）
//1、获取div组件初始化（注意：组件必须是dom才能完成初始化）
let div2=echarts.init(document.getElementById("mydiv2"));
//2、设置
let option2={
series:[{
//图表名称
name:"销售数据",
//设置半径大小,用于调整图表大小
radius:"70%",
//图表类型
type:"pie",
//要呈现的数据（饼图要呈现的数据是数组，数组中装载json格式）
//name:用于设置属性名 value：设置对应的品牌数值
data:[
{name:"联想",value:22},
{name:"华为",value:"21"},
{name:"戴尔",value:"32"},
{name:"三星",value:"65"},
{name:"华硕",value:"89"},
{name:"小米",value:"22"},
{name:"苹果",value:"23"},
]
}]
}
//3、关联
div2.setOption(option2);
南丁格尔图
radius:[20,150],
roseType:'area'
//添加这两个属性即可
饼图的可选属性
let option2={
//设置图表的标题
title:{
//标题内容
text:"商品销售数据",
//子标题
subtext:"统计人：rajuna",
//对齐方式
x:"center"
},
//鼠标悬停时，提示信息
tooltip:{
//设置百分比
trigger: 'item',
formatter: '{a} <br/>{b} : {c}台({d}%)'
},
//不同的图型对应的工具条不同
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
//指定颜色说明
legend:{
//排列顺序（纵向）
orient:"vertical",
//对齐方式
left:'left'
},
series:[{
//图表名称
name:"销售数据",
//设置半径大小,用于调整图表大小
radius:["10%","70%"],
//南丁格尔图 roseType:'area', radius:[20,150],
//图表类型
type:"pie",
//要呈现的数据（饼图要呈现的数据是数组，数组中装载json格式）
//name:用于设置属性名 value：设置对应的品牌数值
data:[
{name:"联想",value:22},
{name:"华为",value:"21"},
{name:"戴尔",value:"32"},
{name:"三星",value:"65"},
{name:"华硕",value:"89"},
{name:"小米",value:"22"},
{name:"苹果",value:"23"},
]
}]
}
2、使用ajax呈现真数据
1、dao层代码
package com.sc.dao;
import com.sc.util.JdbcUtil;
import org.springframework.jdbc.core.JdbcTemplate;
import java.time.Instant;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class echartsDao {
JdbcTemplate jt=new JdbcTemplate(JdbcUtil.getDs());
public Map init() {
//创建map封装返回结果
Map map=new HashMap();
String sql="select name,amout from pie";
//得到list<map>
List<Map<String, Object>> list=jt.queryForList(sql);
/*list的值
[{name=联想, amout=321}, {name=惠普, amout=550}, {name=戴尔, amout=33}, {name=华硕, amout=99}, {name=小米, amout=588}, {name=华为, amout=420}, {name=苹果, amout=800}]
*/
//对list遍历。取到每一个name，amount,分别作为key，values存到map中
list.forEach(k->map.put(k.get("name"),k.get("amout")));
return map;
}
//得到所有数据，每一条数据封装map，要包含name ,value
public List<Map<String, Object>> getlist() {
String sql="select name,amout value from pie";
return jt.queryForList(sql);
}
}
2、servlet代码
package com.sc.web;
import com.alibaba.fastjson.JSON;
import com.sc.dao.echartsDao;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.*;
@WebServlet("/echarts")
public class echartsServlet extends BaseServlet {
echartsDao edao=new echartsDao();
/*初始化加载柱状图*/
protected void init(HttpServletRequest request, HttpServletResponse resp) throws ServletException, IOException {
/*柱状图返回的json包含两个数组，一个数组包含名称，一个数组包含数值*/
//调用dao方法，得到map集合
Map map=edao.init();
/*map的值
{联想=321, 惠普=550, 苹果=800, 华为=420, 戴尔=33, 华硕=99, 小米=588}
* */
//得到所有的n品牌名称
Set name = map.keySet();
//得到所有的数值
Collection val = map.values();
//将name和val存到map集合中
Map jsonMap=new HashMap();
jsonMap.put("name",name);
jsonMap.put("val",val);
/*jsonMap的值
* {val=[321, 550, 800, 420, 33, 99, 588], name=[联想, 惠普, 苹果, 华为, 戴尔, 华硕, 小米]}
* */
//将jsonmap返回前台
//设置响应编码格式，赋值乱码
resp.setContentType("text/html;charset=utf-8");
//产生输出流
PrintWriter out = resp.getWriter();
//将Map集合转换成json格式
String json = JSON.toJSONString(jsonMap);
//返回json格式数据到前台
out.write(json);
//刷新流，保证所有数据都输出
out.flush();
out.close();
}
/*初始加载饼状图*/
protected void init2(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
/*第一个数组：显示所有品牌名称------字符串*/
/*第一个数组：显示所有销售数量------json数组，并且每一个json中，包含name，value*/
//每一个map就相当于一个json
//list<map>它就相当于json数组
List<Map<String,Object>> list =edao.getlist();
/*此时list值为
[{name=联想, value=321}, {name=惠普, value=550}, {name=戴尔, value=33}, {name=华硕, value=99}, {name=小米, value=588}, {name=华为, value=420}, {name=苹果, value=800}]
* */
//创建一个list集合，用于封装所有品牌名称
List<String> names= new ArrayList<>();
//对list遍历，取到每一个品牌的名称，放入到name
list.forEach(m->names.add(m.get("name").toString()));
//将这两个集合（数组）放入到map中
Map map=new HashMap();
map.put("list",list);//要显示的数据
map.put("names",names);//要显示的品牌名称
/*此时map的值为
{names=[联想, 惠普, 戴尔, 华硕, 小米, 华为, 苹果], list=[{name=联想, value=321}, {name=惠普, value=550}, {name=戴尔, value=33}, {name=华硕, value=99}, {name=小米, value=588}, {name=华为, value=420}, {name=苹果, value=800}]}
* */
//设置响应编码格式，赋值乱码
resp.setContentType("text/html;charset=utf-8");
//产生输出流
PrintWriter out = resp.getWriter();
//将Map集合转换成json格式
String json = JSON.toJSONString(map);
//返回json格式数据到前台
out.write(json);
//刷新流，保证所有数据都输出
out.flush();
out.close();
}
}
3、jsp代码
<%--
Created by IntelliJ IDEA.
User: 86159
Date: 2023/4/29
Time: 14:18
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>图表使用</title>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/echarts2.min.js"></script>
<style>
div{
float: left;
}
</style>
</head>
<body>
<div style="width: 500px;height: 500px" id="mydiv"></div>
<div style="width: 500px;height: 500px" id="mydiv2"></div>
</body>
<script>
$(function () {
/***************柱状图************/
//1、获取div组件初始化（注意：组件必须是dom才能完成初始化）
let div=echarts.init(document.getElementById("mydiv"));
//2、设置图表的相关样式
let option={
//设置图表的标题
title:{
//标题内容
text:"商品销售数据",
//子标题
subtext:"统计人：rajuna",
//对齐方式
x:"left"
},
xAxis: {
//品牌名称需要动态加载
data: []
},
yAxis: {
},
series: [{
//指定图表名
name:"销售数据",
//指定图表类型
type:"bar",//bar柱状图，pie饼图，line折线图
//指定要显示的数据(xaxis指定了几个名称，就要有几个值)
//动态加载
data:[]
}],
//鼠标悬停时，提示信息
tooltip:{
},
//指定颜色说明(该属性要生效，需要与图表名保持一致)
legend:{
data:['销售数据'],
x:"center"//对齐方式
},
//工具栏
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
};
//3、将图表属性与图表组件相关联
div.setOption(option);
/******************柱状图添加数据**************/
$.ajax({
url:"echarts",
type:"post",
data:{method:"init"},
dataType:"json",
success:function (data) {
//重新渲染图表（添加数据）
div.setOption({
//指定图表属性需要
series: [{
//动态加载
data:data.val
}],
xAxis: {
//品牌名称需要动态加载
data: data.name
},
})
}
})
/***************柱状图************/
/***************饼图************/
//1、获取div组件初始化（注意：组件必须是dom才能完成初始化）
let div2=echarts.init(document.getElementById("mydiv2"));
//2、设置
let option2={
//设置图表的标题
title:{
//标题内容
text:"商品销售数据",
//子标题
subtext:"统计人：rajuna",
//对齐方式
x:"center"
},
//鼠标悬停时，提示信息
tooltip:{
//设置百分比
trigger: 'item',
formatter: '{a} <br/>{b} : {c}台({d}%)'
},
//不同的图型对应的工具条不同
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
//指定颜色说明
legend:{
//排列顺序（纵向）
orient:"vertical",
//对齐方式
left:'left'
},
series:[{
//图表名称
name:"销售数据",
//设置半径大小,用于调整图表大小
radius:["10%","70%"],
//南丁格尔图 roseType:'area', radius:[20,150],
//图表类型
type:"pie",
//要呈现的数据（饼图要呈现的数据是数组，数组中装载json格式）
//name:用于设置属性名 value：设置对应的品牌数值
//动态加载
data:[]
}]
}
//3、关联
div2.setOption(option2);
/***************发送ajax重新渲染饼图************/
$.ajax({
url:"echarts",
type:"post",
data:{method:"init2"},
dataType:"json",
success:function (data) {
// /重新渲染图表（添加数据）
div2.setOption({
//指定颜色说明
legend:{
//排列顺序（纵向）
orient:"vertical",
//对齐方式
left:'left',
data:data.names
},
series:[{
//图表名称
name:"销售数据",
//设置半径大小,用于调整图表大小
radius:["10%","70%"],
//南丁格尔图 roseType:'area', radius:[20,150],
//图表类型
type:"pie",
//要呈现的数据（饼图要呈现的数据是数组，数组中装载json格式）
//name:用于设置属性名 value：设置对应的品牌数值
//动态加载
data:data.list
}]
})
}
})
/***************饼图************/
})
</script>
</html>
第五章
layui的后台布局
layu的数据表格
1、layui的后台布局
太卡了，新开一个笔记…
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
