06 JQuery调用接口

文章目录

一、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>