jq发送网络请求案例--渲染数据、增删改查
<!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."></script>
<script src="/ajax/libs/qs/6.11.0/"></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) {
// ();
//存储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) {
// (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');
// (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');
// (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>