1. 案例需求
向接口发送网络请求，将数据渲染在页面上，并实现对应的增删改查功能
2. 需要用到的jQuery静态方法：
Storage setItem() 方法
setItem() 方法设置指定存储对象项的值。
setItem() 方法属于 Storage 对象，它可以是 localStorage 对象，也可以是 sessionStorage 对象。(本案例中我们仅用sessionStorage对象就可以)
sessionStorage 对象仅存储一个会话的数据（关闭浏览器选项卡时数据将被删除）。
用法：
向 sessionStorage 中保存数据的语法： sessionStorage.setItem(“key”, “value”);
从 sessionStorage 中读取数据的语法：var lastname = sessionStorage.getItem(“key”);
ajaxSetup() 方法
为所有ajax设置默认值
语法：$.ajaxSetup({name:value, name:value, … })
trigger() 方法
trigger() 方法触发被选元素的指定事件类型。
语法：$(selector).trigger(eventObj)
eventObj,规定事件发生时运行的函数。
forEach()方法
对数组的每个元素执行一次给定的函数
语法：arr.forEach(callback(currentValue, index, array)，thisArg)
callback，为数组中每个元素执行的函数，该函数接收一至三个参数
currentValue ，数组中正在处理的当前元素。
index （可选），数组中正在处理的当前元素的索引。
array （可选），forEach() 方法正在操作的数组。
thisArg （可选）参数，当执行回调函数 callback 时，用作 this 的值。
3. 代码搭建
3.1 案例思路
几乎所有事件都要发送网络请求，网络请求的数据格式或请求头均由接口决定。本案例的难点在于模态框的网络请求。由于修改按钮和新增按钮共用一个模态框，所以可以共用一个网络请求。唯一不同的是新增按钮不需要传送产品的id，而修改按钮在发送网络请求时需要传送产品的id。因此在模态框的确定按钮中，我们需要判断是发送哪种请求。
3.2 页面结构
先搭建好页面结构
<style>
/* 初始化table样式 */
table,
th,
td {
border: 1px solid #ccc;
border-collapse: collapse;
text-align: center;
line-height: 30px;
width: 1200px;
margin-top: 10px;
}
/* 初始化模态框遮罩样式 */
.dialog {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
line-height: 40px;
/* 隐藏模态框 */
display: none;
}
/* 初始化模态框样式 */
.dialog .container {
font-size: 18px;
width: 60%;
height: 400px;
margin: calc((100vh - 400px)/2) auto;
background-color: #fff;
}
.dialog .container .dialog_header {
background-color: bisque;
}
.dialog .container .dialog_footer button {
position: relative;
left: 350px;
display: inline-block;
width: 50px;
background-color: bisque;
}
</style>
<body>
<button id="login">登录</button>
<button id="load">加载数据</button>
<input type="text">
<select name="status" id="">
<option value="正常">正常</option>
<option value="下架">下架</option>
</select>
<button id="toSearch">查询</button>
<button id="toAdd">新增</button>
<!-- 表格展示数据 -->
<table>
<thead>
<tr>
<th>序号</th>
<th>产品编号</th>
<th>名称</th>
<th>价格</th>
<th>状态</th>
<th>所属栏目</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 表格内容通过发送网络请求渲染出来 -->
</tbody>
</table>
<!-- 模态框 默认不显示 -->
<div class="dialog">
<div class="container">
<div class="dialog_header">
新增产品信息
</div>
<div class="dialog_center">
<div>
产品名称: <input type="text" name="name">
</div>
<div>
状态: 正常<input type="radio" name="status" value="正常">
下架<input type="radio" name="status" value="下架">
</div>
<div>
价格: <input type="text" name="price" id="">
</div>
<div>
产品描述: <textarea name="description" cols="30" rows="10"></textarea>
</div>
</div>
<div class="dialog_footer">
<button class="cancel">取消</button>
<button class="submit">确定</button>
</div>
</div>
</div>
</body>
未渲染的页面效果：
3.3 局部jq代码
在script标签中需要引进jquery和Qs组件库
//引入本地jq
<script src="./jquery-3.6.0.js"></script>
//引入在线Qs
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
打开浏览器时，首先要模拟登录事件，获得后续活动的访问权限。
//声明全局ajax请求基础路径
var baseURL = "http://43.142.186.151:8002";
var user=null
//登录按钮：点击登录 获取token 存储起来 配置到ajax全局对象中
$('#login').click(function () {
var obj = {
username: "admin1",
password: 123321
};
//发送登录请求
$.ajax({
url: baseURL + "/user/login",
//根据接口需求配置请求方法和请求头
method: "post",
headers: {
"Content-Type": "application/json"
},
data: JSON.stringify(obj),
success(res) {
// console.log(res.data.token);
//存储token
sessionStorage.setItem('token', res.data.token);
//配置全局headers
$.ajaxSetup({
headers: {
"Authorization": sessionStorage.getItem('token')
}
})
// 登录的同时，直接获取数据
$("#load").trigger('click')
},
error(err) { }
})
});
模拟加载事件
//load按钮加载数据事件
var obj = {
page: 1,
pageSize: 20
}
$("#load").click(function () {
$('tbody').empty();
$.ajax({
url: baseURL + "/product/pageQuery",
method: "get",
data: Qs.stringify(obj),
success(res) {
// console.log(res);
//将获得的数据插入到页面中
res.data.list.forEach(function (item, index) {
var newTr = `
<tr>
<td>${index + 1}</td>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.price}</td>
<td>${item.status}</td>
<td>${item.category.name}</td>
<td>
<button class='toDelete' id='${item.id}'>删除</button>
<button class='toEdit' item='${JSON.stringify(item)}'>修改</button>
</td>
</tr>
`
$(newTr).appendTo('tbody')
})
},
error(err) { }
})
})
防止刷新时丢失数据：
//解决页面刷新数据丢失问题
var token = sessionStorage.getItem('token');
// console.log(token);
if (token) {
$.ajaxSetup({
headers: {
'Authorization': token
}
})
// 模拟点击加载数据
$('#load').trigger('click')
} else {
// 假设token失效
$('#login').trigger('click');
}
查询按钮事件
$('#toSearch').click(function () {
$('tbody').empty();
let temp = {
...obj,
name: $('input:first').val(),
status: $('select:first').val()
}
$.ajax({
url: baseURL + "/product/pageQuery",
method: "get",
data: Qs.stringify(temp),
success(res) {
console.log(res);
res.data.list.forEach(function (item, index) {
var newTr = `
<tr>
<td>${index + 1}</td>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.price}</td>
<td>${item.status}</td>
<td>${item.category.name}</td>
<td><button class='toDelete' id='${item.id}'>删除</button><button>修改</button></td>
</tr>
`
$('tbody').append(newTr)
})
},
error(err) { }
})
})
模态框按钮事件
//确定按钮
$('.submit').click(function () {
//获取输入框中输入的信息
var name = $('input[name=name]').val();
var status = $('input[type=radio]:checked').val();
var price = $('input[name=price]').val();
var description = $('textarea[name=description]').val()
$.ajax({
url: baseURL + '/product/saveOrUpdate',
method: "post",
data: {
id:user?user.id:"",
name,
status,
price,
description,
productCategoryId:9441
},
success(res){
console.log(res);
$('.dialog').fadeOut()
alert(res.message)
$('#load').trigger('click')
},
error(err){}
})
})
//取消按钮
$('.cancel').click(function () {
$('.dialog').fadeOut()
})
新增按钮事件：
$('#toAdd').click(function () {
$('.dialog').fadeIn()
var name = $('input[name=name]').val("");
var status = $('input[type=radio]').val("checked",false);
var price = $('input[name=price]').val("");
var description = $('textarea[name=description]').val("")
//修改模态框标题为修改产品信息
$('.dialog_header').html('新增产品信息');
})
表格删除按钮事件：
由于表格中的按钮是通过网络请求渲染上去的，所以需要通过事件代理才能绑定上事件，修改按钮也一样。
$('table tbody').on('click', '.toDelete', function () {
//获取当前行 产品的id
var id = $(this).attr('id');
// console.log(id);
var result = confirm('确定删除吗？')
if (result) {
$.ajax({
url: baseURL + "/product/deleteById",
method: "get",
// 第一个id是后端需要的参数
// 第二个id是自己点击按钮获取的变量id
data: { id: id },
success(res) {
console.log(res);
alert(res.message)
//刷新页面
$("#load").trigger('click')
},
error(err) { }
})
} else {
$('confirm').fadeOut()
}
});
表格修改按钮事件：
$('table tbody').on('click','.toEdit', function () {
$('.dialog').fadeIn()
user=$(this).attr('item');
user=JSON.parse(user);
console.log(user);
$('input[name=name]').val(user.name);
$('input[type=radio][value='+user.status+']').prop("checked",true);
$('input[name=price]').val(user.price);
$('textarea[name=description]').val()
// 修改模态框标题为修改产品信息
$('.dialog_header').html('修改产品信息');
})
3.4 完整案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品管理</title>
<script src="./jquery-3.6.0.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
<style>
/* 初始化table样式 */
table,
th,
td {
border: 1px solid #ccc;
border-collapse: collapse;
text-align: center;
line-height: 30px;
width: 1200px;
margin-top: 10px;
}
/* 初始化模态框遮罩样式 */
.dialog {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
line-height: 40px;
/* 隐藏模态框 */
display: none;
}
/* 初始化模态框样式 */
.dialog .container {
font-size: 18px;
width: 60%;
height: 400px;
margin: calc((100vh - 400px)/2) auto;
background-color: #fff;
}
.dialog .container .dialog_header {
background-color: bisque;
}
.dialog .container .dialog_footer button {
position: relative;
left: 350px;
display: inline-block;
width: 50px;
background-color: bisque;
}
</style>
<script>
//入口函数
$(function () {
//声明全局ajax请求基础路径
var baseURL = "http://43.142.186.151:8002";
var user=null
//登录按钮：点击登录 获取token 存储起来 配置到ajax全局对象中
$('#login').click(function () {
var obj = {
username: "admin1",
password: 123321
};
//发送登录请求
$.ajax({
url: baseURL + "/user/login",
method: "post",
headers: {
"Content-Type": "application/json"
},
data: JSON.stringify(obj),
success(res) {
// console.log(res.data.token);
//存储token
sessionStorage.setItem('token', res.data.token);
//配置全局headers
$.ajaxSetup({
headers: {
"Authorization": sessionStorage.getItem('token')
}
})
// 登录的同时，直接获取数据
$("#load").trigger('click')
},
error(err) { }
})
});
//load按钮加载数据事件
var obj = {
page: 1,
pageSize: 20
}
$("#load").click(function () {
$('tbody').empty();
$.ajax({
url: baseURL + "/product/pageQuery",
method: "get",
data: Qs.stringify(obj),
success(res) {
// console.log(res);
res.data.list.forEach(function (item, index) {
var newTr = `
<tr>
<td>${index + 1}</td>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.price}</td>
<td>${item.status}</td>
<td>${item.category.name}</td>
<td>
<button class='toDelete' id='${item.id}'>删除</button>
<button class='toEdit' item='${JSON.stringify(item)}'>修改</button>
</td>
</tr>
`
$(newTr).appendTo('tbody')
})
},
error(err) { }
})
})
//解决页面刷新数据丢失问题
var token = sessionStorage.getItem('token');
// console.log(token);
if (token) {
$.ajaxSetup({
headers: {
'Authorization': token
}
})
// 模拟点击加载数据
$('#load').trigger('click')
} else {
// 假设token失效
$('#login').trigger('click');
}
//查询按钮事件 按照名称查询
$('#toSearch').click(function () {
$('tbody').empty();
let temp = {
...obj,
name: $('input:first').val(),
status: $('select:first').val()
}
$.ajax({
url: baseURL + "/product/pageQuery",
method: "get",
data: Qs.stringify(temp),
success(res) {
console.log(res);
res.data.list.forEach(function (item, index) {
var newTr = `
<tr>
<td>${index + 1}</td>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.price}</td>
<td>${item.status}</td>
<td>${item.category.name}</td>
<td><button class='toDelete' id='${item.id}'>删除</button><button>修改</button></td>
</tr>
`
$('tbody').append(newTr)
})
},
error(err) { }
})
})
//模态框确定按钮事件
$('.submit').click(function () {
//获取输入框中输入的信息
var name = $('input[name=name]').val();
var status = $('input[type=radio]:checked').val();
var price = $('input[name=price]').val();
var description = $('textarea[name=description]').val()
$.ajax({
url: baseURL + '/product/saveOrUpdate',
method: "post",
data: {
id:user?user.id:"",
name,
status,
price,
description,
productCategoryId:9441
},
success(res){
console.log(res);
$('.dialog').fadeOut()
alert(res.message)
$('#load').trigger('click')
},
error(err){}
})
})
//取消按钮
$('.cancel').click(function () {
$('.dialog').fadeOut()
})
// 新增按钮事件
$('#toAdd').click(function () {
$('.dialog').fadeIn()
var name = $('input[name=name]').val("");
var status = $('input[type=radio]').val("checked",false);
var price = $('input[name=price]').val("");
var description = $('textarea[name=description]').val("")
//修改模态框标题为修改产品信息
$('.dialog_header').html('新增产品信息');
})
//删除按钮事件 事件代理
$('table tbody').on('click', '.toDelete', function () {
//获取当前行 产品的id
var id = $(this).attr('id');
// console.log(id);
var result = confirm('确定删除吗？')
if (result) {
$.ajax({
url: baseURL + "/product/deleteById",
method: "get",
// 第一个id是后端需要的参数
// 第二个id是自己点击按钮获取的变量id
data: { id: id },
success(res) {
console.log(res);
alert(res.message)
//刷新页面
$("#load").trigger('click')
},
error(err) { }
})
} else {
$('confirm').fadeOut()
}
});
//修改按钮事件 修改产品信息
$('table tbody').on('click','.toEdit', function () {
$('.dialog').fadeIn()
user=$(this).attr('item');
user=JSON.parse(user);
console.log(user);
$('input[name=name]').val(user.name);
$('input[type=radio][value='+user.status+']').prop("checked",true);
$('input[name=price]').val(user.price);
$('textarea[name=description]').val()
// 修改模态框标题为修改产品信息
$('.dialog_header').html('修改产品信息');
})
})
</script>
</head>
<body>
<button id="login">登录</button>
<button id="load">加载数据</button>
<input type="text">
<select name="status" id="">
<option value="正常">正常</option>
<option value="下架">下架</option>
</select>
<button id="toSearch">查询</button>
<button id="toAdd">新增</button>
<!-- 表格展示数据 -->
<table>
<thead>
<tr>
<th>序号</th>
<th>产品编号</th>
<th>名称</th>
<th>价格</th>
<th>状态</th>
<th>所属栏目</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 表格内容通过发送网络请求渲染出来 -->
</tbody>
</table>
<!-- 模态框 -->
<div class="dialog">
<div class="container">
<div class="dialog_header">
新增产品信息
</div>
<div class="dialog_center">
<div>
产品名称: <input type="text" name="name">
</div>
<div>
状态: 正常<input type="radio" name="status" value="正常">
下架<input type="radio" name="status" value="下架">
</div>
<div>
价格: <input type="text" name="price" id="">
</div>
<div>
产品描述: <textarea name="description" cols="30" rows="10"></textarea>
</div>
</div>
<div class="dialog_footer">
<button class="cancel">取消</button>
<button class="submit">确定</button>
</div>
</div>
</div>
</body>
</html>