如何将HTML文本框输入传递至JS并嵌入API请求URL？

问题背景 #

你需要把HTML文本框的用户输入值替换JS里固定的city变量，将其拼接到OpenWeatherMap的API请求URL中，实现输入城市后获取对应天气数据的功能。

修改方案 #

1. 调整HTML（阻止表单默认刷新行为）

原表单提交会默认跳转页面，我们保留表单结构但修改属性避免默认行为：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-UA-Compatible" content="ie=edge">
    <title>API</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="weather-container">
        <img class="icon">
        <p class="weather"></p>
        <p class="temp"></p>
    </div>
    <form id="weatherForm">
        <p>Insert City:</p>
        <input type="text" name="city" id="citytext" placeholder="City">
        <button type="submit" id="btn1" name="submit">Submit</button>
    </form>
</body>

修改点：给表单添加id="weatherForm"，移除原有的action和method属性，避免默认页面跳转。

2. 重写JavaScript代码

移除固定city变量，改为用户提交时动态获取输入值并发起请求：

// 监听表单提交事件
$('#weatherForm').on('submit', function(e) {
    // 阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    
    // 获取文本框输入的城市值，去除首尾空格
    var city = $('#citytext').val().trim();
    
    // 简单验证：输入为空时提示用户
    if (!city) {
        alert('请输入城市名称');
        return;
    }
    
    // 拼接API请求URL，用用户输入的city替换固定值
    var apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=imperial&appid=0dcc391bac34298837f2047642794ee3`;
    
    // 发起JSONP请求
    $.getJSON(apiUrl, function(data) {
        console.log(data);
        
        // 提取天气相关数据
        var icon = `https://openweathermap.org/img/w/${data.weather[0].icon}.png`;
        var temp = Math.floor(data.main.temp);
        var weather = data.weather[0].main;
        
        // 更新页面内容（用.text()避免多次提交后内容叠加）
        $('.icon').attr('src', icon);
        $('.weather').text(weather);
        $('.temp').text(temp);
    })
    // 处理请求失败的情况
    .fail(function() {
        alert('无法获取该城市天气数据，请检查城市名称是否正确');
    });
});

关键说明：

• 用表单提交事件触发请求，同时阻止默认跳转，保证页面不刷新
• 动态获取输入框值：$('#citytext').val().trim()
• 使用模板字符串拼接URL，比传统字符串拼接更易读
• 用.text()替代.append()，避免多次提交后天气内容重复叠加
• 添加输入验证和请求失败处理，优化用户体验

内容的提问来源于stack exchange，提问作者overlandingbruce