0


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

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

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

直接上源码

<!DOCTYPEhtml><htmllang="en"><head><metacharset="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><labelfor="queryString">Query String:</label><textareaid="queryString"rows="15"></textarea></div><div><labelfor="formattedQueryString">Formatted Query String:</label><textareaid="formattedQueryString"rows="15"></textarea></div><div><labelfor="jsonString">JSON String:</label><textareaid="jsonString"rows="15"></textarea></div><divstyle="display: flex;justify-content: space-between;"><buttononclick="formatQueryString()">Format Query String</button><buttononclick="queryStringToJson()">To JSON</button><buttononclick="jsonToQueryString()">To Query String</button></div><script>functionformatQueryString(){const queryString = document.getElementById('queryString').value;let formattedQueryString ='';const params =newURLSearchParams(queryString);for(const[key, value]of params.entries()){
                formattedQueryString +=`${key}:${value}\n`;}

            document.getElementById('formattedQueryString').value = formattedQueryString.trim();}functionqueryStringToJson(){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 =newURLSearchParams(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;}}functionjsonToQueryString(){const jsonString = document.getElementById('jsonString').value;let queryString;try{const jsonObject =JSON.parse(jsonString);const params =newURLSearchParams();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

本文转载自: https://blog.csdn.net/Ikaros_521/article/details/141532050
版权归原作者 Love丶伊卡洛斯 所有, 如有侵权,请联系我们删除。

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

还没有评论