文章目錄
- 一、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>
