当前位置: 首页> 教育> 锐评 > 前端实现 http请求中 表单请求体和json请求体的互相转换,外加转为 冒号换行格式,用于ApiFox批量导入

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

时间:2025/7/11 4:24:01来源:https://blog.csdn.net/Ikaros_521/article/details/141532050 浏览次数:0次

在线体验: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 JSONconst 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 JSONconst 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请求中 表单请求体和json请求体的互相转换,外加转为 冒号换行格式,用于ApiFox批量导入

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: