在线HTTP请求工具 - 发送HTTP请求并解析JSON数据 - 常规

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线HTTP请求工具</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/json-formatter/1.1.0/json-formatter.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/json-formatter/1.1.0/json-formatter.min.css" rel="stylesheet" />
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        label {
            font-weight: bold;
        }
        input[type="text"], select {
            padding: 5px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-bottom: 10px;
        }
        select {
            width: 150px;
        }
        #result {
            margin-top: 20px;
        }
        #result pre {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>在线HTTP请求工具</h1>
    <form id="request-form">
        <div>
            <label for="url-input">请求链接：</label>
            <input type="text" id="url-input" name="url" required>
        </div>
        <div>
            <label for="method-select">请求方式：</label>
            <select id="method-select" name="method">
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="DELETE">DELETE</option>
            </select>
        </div>
        <div>
            <button type="submit">发送请求</button>
        </div>
    </form>
    <div id="result"></div>
    <script>
        $('#request-form').on('submit', function(e) {
            e.preventDefault();
<pre><code>        var url = $('#url-input').val();
        var method = $('#method-select').val();

        $.ajax({
            url: url,
            method: method,
            dataType: 'json',
            success: function(data) {
                var formatter = new JSONFormatter(data, 1);
                $('#result').html(formatter.render());
            },
            error: function(xhr, textStatus, errorThrown) {
                var status = xhr.status + ' ' + xhr.statusText;
                $('#result').html('&lt;pre&gt;' + status + '&lt;/pre&gt;');
            }
        });
    });
&lt;/script&gt;
</code></pre>
</body>
</html>