文章目录
- 一、Qs.js库介绍
- 1. Qs简介
- 2. Qs.parse
- 3. Qs.stringify
- 二、jQuery调用接口
- 1. 增加（Create）
- 2. 删除（Delete）
- 3. 读取（Read）
- 4. 更新（Update）
- 三、示例
一、Qs.js库介绍
1. Qs简介
Qs是一个url参数转化（parse和stringify）的js库。
- 本地引入
<script src="qs-6.11.2.min.js"></script>
- CDN引入
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.2/qs.min.js"></script>
2. Qs.parse
- 字符串转换为对象
<script>
let params = "a=a1&b=b1&c=c1"
console.log(Qs.parse(params))
</script>
- 控制台日志
3. Qs.stringify
- 对象转换为字符串
<script>
let params = {a: "a1", "b": "b1", "c": "c1"}
console.log(Qs.stringify(params))
</script>
- 控制台日志
二、jQuery调用接口
1. 增加（Create）
$.ajax({
url: '/api/save',
method: 'post',
data: {
name,
status,
},
success(res) {
console.log('数据创建成功');
},
error(error) {
console.log(error);
}
})
2. 删除（Delete）
$.ajax({
url: '/api/delete',
method: 'post',
data: {
role_id: id
},
success(res) {
console.log('数据删除成功');
},
error(error) {
console.log(error);
}
})
3. 读取（Read）
$.ajax({
url: '/api/list',
method: "post",
data: Qs.stringify(data),
success(res) {
res.data.forEach(function (item, index) {
// 数据处理
})
},
error(error) {
console.log(error);
}
})
4. 更新（Update）
$.ajax({
url: '/api/update',
method: 'post',
data: {
role_id,
name,
status,
},
success(res) {
console.log('数据更新成功');
},
error(error) {
console.log(error);
}
})
三、示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="icon" href="data:;base64,=">
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.2/qs.min.js"></script>
</head>
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
text-align: center;
line-height: 30px;
width: 600px;
margin-top: 20px;
}
.dialog {
display: none;
width: 100%;
height: 200vh;
background-color: rgba(0, 0, 0, 1);
position: absolute;
top: 0;
left: 0;
line-height: 50px;
}
.dialog .container {
margin: 10;
font-size: 18px;
width: 60%;
height: 300px;
background-color: #ffffff;
text-align: center;
}
</style>
<body>
<input type="text">
<button id="search">查询</button>
<button id="adddata">添加</button>
<table>
<thead>
<th>角色名称</th>
<th>状态</th>
<th>序号</th>
<th>操作</th>
</thead>
<tbody>
</tbody>
</table>
<!-- 添加和编辑框 -->
<div class="dialog">
<div class="container">
<div class="dialog_center">
<div class="dialog_header">
添加角色
</div>
<div class="dialog_center" style="display:none;">
<div>角色ID：<input type="text" name="role_id"></div>
</div>
<div class="dialog_center">
<div>角色名称：<input type="text" name="name"></div>
</div>
<div class="dialog_center">
<div>状态: 有效 <input type="radio" name="status" value="true">
失效<input type="radio" name="status" value="false">
</div>
</div>
<div class="dialog_center">
<div>序号：<input type="text" name="sort"></div>
</div>
<div class="dialog_footer">
<button class="submit">确定</button>
<button class="cancel">取消</button>
</div>
</div>
</div>
</body>
<script>
var baseURL = "http://127.0.0.1:888/testmanage/api/testRole/"
// 查询按钮
$('#search').click(function () {
$('tbody').empty();
let temp = {
name: $('input:first').val(),
};
$.ajax({
url: baseURL + "list",
method: "post",
data: Qs.stringify(temp),
success(res) {
res.data.forEach(function (item, index) {
var newTr =
`<tr>
<td style="display:none;">${item.role_id}</td>
<td>${item.name}</td>
<td>${item.status}</td>
<td>${item.sort}</td>
<td>
<button class='toDelete' id='${item.role_id}'>删除</button>
<button class='toEdit' obj='${JSON.stringify(item)}'>修改</button>
</td>
</tr>`
$('tbody').append(newTr)
})
},
error(error) {
console.log(error);
}
})
})
// 添加按钮
$('#adddata').click(function () {
$('.dialog').fadeIn()
$('input[name=role_id]').val('')
$('input[name=name]').val('')
$('input[type=radio][value=true]').prop('checked', 'true')
$('input[name=sort]').val('')
})
// 修改按钮
$('table tbody').on('click', '.toEdit', function () {
$('.dialog_header').html('修改角色')
$('.dialog').fadeIn()
obj = $(this).attr('obj')
obj = JSON.parse(obj)
$('input[name=role_id]').val(obj.role_id)
$('input[name=name]').val(obj.name)
$('input[type=radio][value = ' + obj.status + ']').prop('checked', 'true')
$('input[name=sort]').val(obj.sort)
})
// 添加和编辑框 取消按钮
$('.cancel').click(function () {
$('.dialog').fadeOut()
})
// 添加和编辑框 确定按钮
$('.submit').click(function () {
var role_id = $('input[name=role_id]').val()
var name = $('input[name=name]').val()
var status = $('input[type=radio]:checked').val()
var sort = $('input[name=sort]').val()
var saveupdate = 'update'
if (role_id == '') {
saveupdate = 'save'
}
$.ajax({
url: baseURL + saveupdate,
method: 'post',
data: {
role_id,
name,
status,
sort,
},
success(res) {
console.log(res);
$('.dialog').fadeOut()
$('#search').trigger('click')
},
error(error) {
console.log(error);
}
})
})
// 删除按钮
$('table tbody').on('click', '.toDelete', function () {
var id = $(this).attr('id')
$.ajax({
url: baseURL + 'delete',
method: 'post',
data: {
role_id: id
},
success(res) {
$('#search').trigger('click')
},
error(error) {
console.log(error);
}
})
})
// 打开页面时查询
$('#search').trigger('click')
</script>
</html>
