前端实现 http请求中 表单请求体和json请求体的互相转换,外加转为 冒号换行格式,用于ApiFox批量导入

news2024/9/23 15:52:03

在线体验:https://ikaros-521.github.io/dev_tool/http/param_json_converter.html

在这里插入图片描述
在这里插入图片描述

直接上源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Query String to JSON Converter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        label {
            display: block;
            margin-top: 10px;
            color: #555;
        }
        input[type="text"], textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-bottom: 10px;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>Query String to JSON Converter</h1>
    <div>
        <label for="queryString">Query String:</label>
        <textarea id="queryString" rows="15"></textarea>
    </div>
    <div>
        <label for="formattedQueryString">Formatted Query String:</label>
        <textarea id="formattedQueryString" rows="15"></textarea>
    </div>
    <div>
        <label for="jsonString">JSON String:</label>
        <textarea id="jsonString" rows="15"></textarea>
    </div>
    <div style="display: flex; justify-content: space-between;">
        <button onclick="formatQueryString()">Format Query String</button>
        <button onclick="queryStringToJson()">To JSON</button>
        <button onclick="jsonToQueryString()">To Query String</button>
    </div>

    <script>
        function formatQueryString() {
            const queryString = document.getElementById('queryString').value;
            let formattedQueryString = '';

            const params = new URLSearchParams(queryString);

            for (const [key, value] of params.entries()) {
                formattedQueryString += `${key}:${value}\n`;
            }

            document.getElementById('formattedQueryString').value = formattedQueryString.trim();
        }

        function queryStringToJson() {
            const queryString = document.getElementById('queryString').value;
            let jsonString;

            try {
                // Try to parse the input as JSON
                const jsonInput = JSON.parse(queryString);
                jsonString = JSON.stringify(jsonInput, null, 4);
                document.getElementById('jsonString').value = jsonString;
            } catch (error) {
                // If parsing fails, assume it's a query string and convert to JSON
                const params = new URLSearchParams(queryString);
                const jsonOutput = {};

                for (const [key, value] of params.entries()) {
                    try {
                        jsonOutput[key] = JSON.parse(decodeURIComponent(value));
                    } catch (e) {
                        jsonOutput[key] = decodeURIComponent(value);
                    }
                }

                jsonString = JSON.stringify(jsonOutput, null, 4);
                document.getElementById('jsonString').value = jsonString;
            }
        }

        function jsonToQueryString() {
            const jsonString = document.getElementById('jsonString').value;
            let queryString;

            try {
                const jsonObject = JSON.parse(jsonString);
                const params = new URLSearchParams();

                for (const key in jsonObject) {
                    if (jsonObject.hasOwnProperty(key)) {
                        const value = jsonObject[key];
                        params.append(key, encodeURIComponent(JSON.stringify(value)));
                    }
                }

                queryString = params.toString();
                document.getElementById('queryString').value = queryString;
            } catch (error) {
                console.error("Invalid JSON input:", error);
            }
        }
    </script>
</body>
</html>

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

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

相关文章

慢SQL定位及优化

1.如何定位慢查询 方案1&#xff1a;开源工具 调式工具&#xff1a;Arthas 运维工具&#xff1a;Prometheus、Skywalking 方案2&#xff1a;MySQL自带慢日志 慢查询日志记录了所有执行时间超过指定参数&#xff08;long_query_time&#xff0c;单位&#xff1a;秒&#xff0c…

QT error: undefined reference to `vtable for Net‘

报错 C:\Users\Administrator\Desktop\VideoHill\GikISearch\net.cpp:4: error: undefined reference to vtable for Net 以下是两个可能错误原因 1&#xff0c;未定义Q_OBJECT 宏 在头文件中加上 加上#include <QObject>&#xff0c; 改写继承QObject 和定义宏 …

【HarmonyOS】鸿蒙应用蓝牙功能实现 (三)

【HarmonyOS】鸿蒙应用蓝牙功能实现 &#xff08;三&#xff09; 前言 今天整理蓝牙Demo代码&#xff0c;查看官网时发现自己帐号没有登录&#xff0c;竟然也可以访问最新的API文档&#xff0c;真是喜大奔普。看来华为已经开始对外开放最新的API文档&#xff0c;不再有白名单…

Leetcode每日刷题之面试题01.06字符串压缩(C++)

1.题目解析 本题的目的是遍历一个字符串&#xff0c;将重复的字符串以该字符出现次数进行压缩&#xff0c;最终返回压缩后的字符串即可 题目来源&#xff1a;面试题01.06.字符串压缩 2.算法原理 我们从左往右遍历字符串&#xff0c;用 ch 记录当前要压缩的字符&#xff0c;cnt …

交叉编译Qt5.12.8附带编译opengl

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、重要说明二、准备环境1.下载qt5.12.8源代码2.配置系统环境3.安装必要工具4.解压qt5源代码5.开始配置编译6.配置qtcreator 三、编译opengl总结 前言 最近有…

zdppy+vue3+onlyoffice文档管理系统实战 20240825上课笔记 zdppy_cache框架增加resize清理缓存的方法

遗留问题 设置缓存&#xff0c;已完成获取缓存&#xff0c;已实现删除缓存&#xff0c;已实现查询所有key&#xff0c;带查询参数&#xff1a;active只查激活的&#xff0c;value包含value默认只获取key查询缓存大小清空缓存判断是否为管理员 实现删除缓存的接口 async def …

[C语言]一、C语言基础

G:\Cpp\C语言精讲 1. C语言入门 1.1 初识计算机语言 计算机编程语言&#xff0c;就是人与计算机交流的方式。人们可以使用编程语言对计算机下达命令&#xff0c;让计算机完成人们需要的功能。 计算机语言有很多种。如&#xff1a;C 、C、Java、Go、JavaScript、Python&#x…

音视频入门基础:WAV专题(6)——通过FFprobe显示WAV音频文件每个数据包的信息

通过FFprobe命令可以显示WAV音频文件每个packet&#xff08;也称为数据包或多媒体包&#xff09;的信息&#xff1a; ffprobe -of json -show_packets XXX.wav 输出如下&#xff1a; 其中&#xff1a; 1.codec_type&#xff1a;packet类型&#xff0c;表示该路流是视频还是音…

【CSS】使用 CSS 自定义属性(变量)-- var()

自定义属性&#xff08;有时候也被称作CSS 变量或者级联变量&#xff09;是由 CSS 作者定义的&#xff0c;它包含的值可以在整个文档中重复使用。由自定义属性标记设定值&#xff08;比如&#xff1a; --main-color: black;&#xff09;&#xff0c;由 var() 函数来获取值&…

一台电脑配置两个Git账号(github和gitlab),不同仓库使用不同的git

我们工作时一般都是使用gitlab&#xff0c;工作电脑也一般配置的 git 是连接 gitlab 的&#xff0c;那么当我们如果想用同一个电脑实现不同仓库根据自己的需要到底是推送代码到github还是 gitlab&#xff0c;以及使用哪个账号&#xff0c;(比如如果想用工作电脑维护自己的 gith…

C语言学习,Turbo C 开发环境回顾

&#xff08;1&#xff09;Turbo C 集成开发环境&#xff1a; &#xff08;2&#xff09;按AltF&#xff0c;进入File菜单&#xff1a; &#xff08;3&#xff09;按AltR&#xff0c;进入Run菜单&#xff1a; &#xff08;4&#xff09;按AltC&#xff0c;进入Compile菜单&…

Java 入门指南:Java 泛型(generics)

Java 泛型概要 Java 泛型&#xff08;generics&#xff09; 是 JDK 5 中引入的一个新特性。泛型的本质是参数化类型&#xff0c;也就是所操作的数据类型被指定为一个参数&#xff08;可以称之为类型形参&#xff0c;然后在使用/调用时传入具体的类型。&#xff09; 使用 Java …

【机器学习】特征工程的基本概念以及LASSO回归和主成分分析优化方法

引言 特征工程是机器学习中的一个关键步骤&#xff0c;它涉及到从原始数据中提取和构造新的特征&#xff0c;以提高模型的性能和预测能力LASSO&#xff08;Least Absolute Shrinkage and Selection Operator&#xff09;回归是一种用于回归分析的线性模型&#xff0c;它通过引入…

字节跳动-生活服务-java后端-一面

基础题 计算机网络 1.tcp三次握手和四次挥手&#xff1f;tcp的第三次握手可以传输应用层数据嘛&#xff1f; 4.1 TCP 三次握手与四次挥手面试题 | 小林coding (xiaolincoding.com) 2.描述一下打开百度首页后发生的网络过程&#xff1f; 计算机网络面试题 | 小林coding (xi…

linux-基础知识1

简单命令 init 0 关机 int 6 重启 pwd 查看当前所在目录&#xff0c; cd切换目录 ls 列出目录下的内容 clear 清屏 date 查看时间 路径 linux表示硬件设备的文件在dev目录 /tmp是临时目录&#xff0c;可以创建目录和文件&#xff0c;但不能保证安全 df查看文件系统…

数据仓库系列 1:什么是数据仓库,它与传统数据库有什么不同?

想象一下,你正站在一座巨大的仓库前。这座仓库不是用来存放普通商品的,而是存储着海量的数据 - 这就是数据仓库。在大数据时代,数据仓库已经成为企业数据管理的核心。但它究竟是什么?又为什么如此重要?让我们一起揭开数据仓库的神秘面纱,探索它与我们熟知的传统数据库有何不同…

IDEA2023的激活与安装

前言 开始了java的学习之旅&#xff0c;当然少不了IDEA这个得力的开发工具软件。但是IDEA是付费的&#xff0c;免费版功能有太少&#xff0c;怎么使用上正式版呢&#xff01;当然还是激活啦 第一步&#xff1a;官网下载安装包 安装步骤就不展现了&#xff0c;无脑下一步就可以…

【学习笔记】技术分析-华为智驾控制器MDC Pro 610分析

华为的智能驾驶控制器一直在迭代&#xff0c;和网络上广泛披露的早期MDC 610相比&#xff0c;华为 MDC Pro 610 智能驾驶控制器&#xff0c;现在的样品设计采用了海思的双系统级芯片 (SoC) 提高了处理能力&#xff0c;三星的存储模块为无缝数据处理提供了充足的内存&#xff0c…

高并发业务下的无损技术方案设计

0 前言 秒杀&#xff0c;既有需求真实且迫切的用户&#xff0c;也有试图牟利的黄牛。系统挑战&#xff0c;就是相较于以往千倍万倍的用户规模&#xff0c;可能是真人可能是机器人&#xff0c;在同一瞬间对系统发起冲击&#xff0c;需要海量的计算资源才能支撑。 秒杀系统的设计…

Long Short-Term Memory

这篇论文总结的太抽象了&#xff0c;只是翻译了一遍。 &#xff08;我太笨了&#xff0c;如果把这个当我的入门读物&#xff0c;我觉着会把我折磨坏&#xff09; 递归神经网络的一个重要优点是它们在映射输入和输出序列时使用上下文信息的能力。不幸的是&#xff0c;对于标准的…