在线体验: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>