06 JQuery调用接口

news2024/11/28 2:42:39

文章目录

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1295906.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

机器连接和工业边缘计算

软件应用和IT创新是制造业投资的主要驱动力。解决方案架构应围绕特定标准进行整合&#xff0c;并采用架构蓝图和最佳实践来满足最终用户的需求。此外&#xff0c;边缘计算&#xff08;Edge Computing&#xff09;也将在制造业中加速部署。 边缘计算是制造业的下一个变革驱动力。…

视频剪辑高手揭秘:如何批量减少时长并调整播放速度,提升视频效果

随着社交媒体的兴起&#xff0c;视频制作的需求越来越大。然而往往视频文件存在一些问题&#xff0c;例如时长过长&#xff0c;或者要调整播放速度以更好地传达信息。这些问题不仅影响了视频的观看体验&#xff0c;也可能导致视频难以在社交媒体上获得广泛的传播。那么&#xf…

电子学会C/C++编程等级考试2021年06月(五级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:数字变换 给定一个包含5个数字(0-9)的字符串,例如 “02943”,请将“12345”变换到它。 你可以采取3种操作进行变换 1. 交换相邻的两个数字 2. 将一个数字加1。如果加1后大于9,则变为0 3. 将一个数字加倍。如果加倍后大于…

react Hooks实现原理

Fiber 上篇文章fiber简单理解记录了react fiber架构&#xff0c;Hooks是基于fiber链表来实现的。阅读以下内容时建议先了解react fiber。 jsx -> render function -> vdom -> fiber树 -> dom vdom 转 fiber 的过程称为 recocile。diff算法就是在recocile这个过程…

深入探讨Go语言协程调度:GRM模型解析与优化策略

一、线程调度 1、早期单线程操作系统 一切的软件都是跑在操作系统上&#xff0c;真正用来干活&#xff08;计算&#xff09;的是 CPU早期的操作系统每个程序就是一个进程&#xff0c;直到一个程序运行完&#xff0c;才能进行下一个进程&#xff0c;就是“单进程时代”一切的程…

数据可视化:解锁企业经营的智慧之道

在现代企业管理中&#xff0c;数据可视化已经成为了一项重要的工具。它不仅仅是简单地展示数据&#xff0c;更是提供了深入理解数据、做出更明智决策的方法。作为一名可视化设计从业人员&#xff0c;我经手过一些企业自用的数据可视化项目&#xff0c;今天就来和大家聊聊数据可…

C语言第十七集(待修)

11.30的视频 1.结构体可以这样重新赋值 注:字符数组不能用来赋值 2.匿名结构体重新赋值方法: 注:在创建x时就已经使用过一次匿名结构体了 但是,在使用匿名结构体时,可以一次性创立多个变量 3.结构体内存对齐和对其规则详细搜: 4.总之,我们在创建结构体时,要将占用空间小的成…

一个newman命令行让某大厂瘫痪半天,速看!

newman简介 newman是为Postman而生&#xff0c;专门用来运行Postman编写好的脚本&#xff1b; 使用newman&#xff0c;你可以很方便的用命令行来执行postman collections。 newman的安装 1.先下载Node.js&#xff1b;https://nodejs.org/en/ 2.安装NodeJs(很容易安装&#x…

cmd命令 常用的命令

网络工作为常年公司里的背锅侠&#xff0c;不得不集齐十八般武艺很难甩锅。像cmd命令这种好用又好上手的技术&#xff0c;就是网络工程师上班常备技能。 只要按下快捷键 winR&#xff0c;输入cmd回车&#xff0c;然后输入cmd命令。 像我自己&#xff0c;我就经常用cmd命令检测…

初识优先级队列与堆

1.优先级队列 由前文队列queue可知&#xff0c;队列是一种先进先出(FIFO)的数据结构&#xff0c;但有些情况下&#xff0c;操作的数据可能带有优先级&#xff0c;一般出队列时&#xff0c;可能需要优先级高的元素先出队列&#xff0c;在此情况下&#xff0c;使用队列queue显然不…

xilinx的XVC协议

文章目录 概述JTAG工作方式XVC协议 其他Debug Bridge IP 概述 JTAG工作方式 XVC协议 其他 Debug Bridge IP

cookie总结

cookie和session&#xff1a; 一、Cookie和Session二、使用Cookie保存用户上次的访问时间。三、Cookie常用方法总结乱码问题解决&#xff1a; 一、Cookie和Session 会话&#xff1a;用户从打开浏览器到关闭的整个过程就叫1次会话。 比如有的网站登录过一次&#xff0c;下次再进…

python的websocket方法教程

WebSocket是一种网络通信协议&#xff0c;它在单个TCP连接上提供全双工的通信信道。在本篇文章中&#xff0c;我们将探讨如何在Python中使用WebSocket实现实时通信。 websockets是Python中最常用的网络库之一&#xff0c;也是websocket协议的Python实现。它不仅作为基础组件在…

Spring AOP 概念及其使用

目录 AOP概述 什么是AOP&#xff1f; 什么是Spring AOP ? Spring AOP 快速入门 1.引⼊ AOP 依赖 2.编写AOP程序 Spring AOP 核心概念 1.切点 2.连接点 3.通知 4.切面 通知类型 注意事项: PointCut&#xff08;定义切点&#xff09; 切面优先级 Order 切点表达…

IDEA删除最近打开的文件记录

IDEA删除最近打开的文件记录 遇见问题&#xff1a;如何删除IDEA中最近打开的文件记录 解决方法 先关闭IDEA 找到 recentProjects.xml 文件 windows 位置&#xff1a;&#xff08;AppData是隐藏文件夹&#xff09; 1.C:\Users\电脑用户名\AppData\Roaming\JetBrains\IntelliJIde…

Bash脚本调用百度翻译API进行中文到英文的翻译

写一个bash脚本调用百度翻译API进行中文到英文的翻译&#xff0c;首先需要进行相关的申请。看百度给出的文档链接: 百度翻译API文档 需要先注册一个百度账号&#xff0c;然后申请APPID。脚本中会用到appid和key这两个值。按照文档给出的提示可以获得。如下是脚本&#xff1a; #…

零基础如何入门HarmonyOS开发?

HarmonyOS鸿蒙应用开发是当前非常热门的一个领域&#xff0c;许多人都想入门学习这个技术。但是&#xff0c;对于零基础的人来说&#xff0c;如何入门确实是一个问题。下面&#xff0c;我将从以下几个方面来介绍如何零基础入门HarmonyOS鸿蒙应用开发学习。 一、了解HarmonyOS鸿…

markdown记录

文章目录 基础操作使用一级列表、二级列表 博文链接 基础操作 使用一级列表、二级列表 博文链接 CSDN-Markdown语法集锦 CSDN-markdown语法之如何使用LaTeX语法编写数学公式 CSDN Markdown简明教程1-关于Markdown CSDN Markdown简明教程2-基本使用 CSDN Markdown简明教程3-表…

X86汇编语言:从实模式到保护模式(代码+注释)--c6

X86汇编语言&#xff1a;从实模式到保护模式&#xff08;代码注释&#xff09;–c6 标志寄存器FLAGS&#xff1a; 6th&#xff1a;ZF位&#xff08;Zero Flag&#xff09;&#xff1a;零标志&#xff0c;执行算数或者逻辑运算之后&#xff0c;会将该位置位。10th&#xff1a;D…

油猴(Tampermonkey)浏览器插件简单自定义脚本开发

介绍 浏览器插件&#xff0c;包括油猴插件和其他插件&#xff0c;通过它们可以实现浏览器网页的定制化与功能增强。 其他插件一般只有某种具体的功能&#xff0c;且已经写死而不能更改&#xff0c;比如Adblock插件只用于去广告。 油猴插件是一款用于管理用户脚本的插件&…