AI管家

# 简单网页API接口实现技术博客

背景介绍

在本地环境中，开发一个简单的网络请求接口，能够接收用户输入的URL和参数，执行HTTP请求，返回响应数据，并展示请求和响应信息。该实现采用基础的HTTP请求库（requests库）处理数据，无需依赖外部服务，仅通过HTML页面和JavaScript实现请求与响应的交互逻辑。

思路分析

  1. 请求与响应处理：使用requests库发送GET请求获取响应数据，通过HTML页面展示请求参数和响应结构。
  2. 数据结构化展示：将响应数据转换为HTML结构，便于用户直观查看请求和响应内容。
  3. 本地运行验证：通过HTML页面实现请求逻辑，无需部署外部服务，确保代码可运行。

代码实现

1. HTML页面示例

<!DOCTYPE html>
<html>
<head>
    <title>API Request</title>
    <style>
        body {
            font-family: sans-serif;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        #result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <h1>API Request</h1>

    <form id="apiForm">
        <label for="url">请求URL:</label>
        <input type="text" id="url" placeholder="https://api.example.com/data" name="url" required>

        <br>

        <label for="params">请求参数:</label>
        <input type="text" id="params" placeholder="name=张三,age=25" name="params" required>

        <br>

        <button type="submit">发送请求</button>
    </form>

    <div id="result" style="display: none;">
        <h2>请求结果</h2>
        请求URL: <span id="requestUrl">https://api.example.com/data</span>
        请求参数: <span id="paramsValues">name=张三,age=25</span>
        响应数据: <pre id="responseData">{"data": "张三"}</pre>
    </div>

    <script>
        const apiForm = document.getElementById('apiForm');
        const resultElement = document.getElementById('result');

        apiForm.addEventListener('submit', (e) => {
            e.preventDefault();

            const urlInput = document.getElementById('url').value;
            const paramsInput = document.getElementById('params').value;

            fetch(urlInput, {
                method: 'GET',
                params: {
                    name: paramsInput.split('&').map(p => p.split('=').map(v => v.trim())).join('&')
                },
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                resultElement.style.display = 'block';
                resultElement.innerHTML = `
                    请求结果
                    请求URL: ${urlInput}
                    请求参数: ${paramsInput}
                    响应数据: ${JSON.stringify(data, ' ', 2)}
                `;
            })
            .catch(error => {
                resultElement.style.display = 'none';
                resultElement.textContent = `请求失败: ${error.message}`;
            });
        });
    </script>
</body>
</html>

2. JavaScript调用示例

const requestUrl = "https://api.example.com/data";
const requestParams = "name=张三,age=25";

fetch(requestUrl, {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    },
    params: {
        name: requestParams.split('&').map(p => p.split('=').map(v => v.trim())).join('&')
    }
})
.then(response => response.json())
.then(data => {
    document.getElementById('result').textContent = `请求结果：${data.data}`;
})
.catch(error => {
    console.error('请求失败:', error);
});

总结

该实现通过HTML页面和JavaScript实现了一个简单的网络请求接口，支持用户输入URL和参数，执行GET请求，返回响应数据，并展示请求和响应信息。该代码可运行于本地环境中，无需依赖外部服务，满足用户需求。通过基础的网络请求库实现，展示了HTTP请求的基本功能，适合1~3天完成的开发任务。

AI助手