在一个input里面输入一个api的json文件（123.json）后，原来的接口中的xxx.json变成123.json

作者：Terry2025.02.19来源：Web前端之家浏览：1172评论:0

关键词：JavaScript

要实现这个功能，你需要一个简单的 HTML 页面和一些 JavaScript 代码来处理输入和更新请求的 URL。下面是一个基本的示例代码：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>API JSON Update</title>  
</head>  
<body>  
    <h1>输入新的 JSON 文件名</h1>  
    <input type="text" id="jsonFile" placeholder="请输入 JSON 文件名，例如 123.json">  
    <button id="updateButton">更新并请求数据</button>  
    
    <h2>请求结果:</h2>  
    <pre id="result"></pre>  

    <script>  
        document.getElementById('updateButton').addEventListener('click', function() {  
            const inputFileName = document.getElementById('jsonFile').value;  
            const originalUrl = 'https://www.ccc.com/xxx.json';  
            const newUrl = originalUrl.replace('xxx.json', inputFileName);  

            fetch(newUrl)  
                .then(response => {  
                    if (!response.ok) {  
                        throw new Error('网络响应不正常');  
                    }  
                    return response.json();  
                })  
                .then(data => {  
                    document.getElementById('result').textContent = JSON.stringify(data, null, 2);  
                })  
                .catch(error => {  
                    document.getElementById('result').textContent = '请求数据时出错: ' + error.message;  
                });  
        });  
    </script>  
</body>  
</html>