Question

我一直致力于一个简单的天气应用项目。用户在输入元素中输入邮政编码，该输入元素（在点击按钮元素时）对wunderground.com进行API调用。然后从JSON对象中获取一些数据，进行字符串化并插入到DOM中。

(function() {
        var wundergroundAPI = "https://api.wunderground.com/api/3b411ca908826af8/conditions/q/";
        var input = $('input');

        $('#submit').on('click', function() {
            var inputValue = input.val();
            var weatherByZip = wundergroundAPI += inputValue += '.json';
            $.getJSON(weatherByZip, function(json) {
                $('#temp-f')
                .text('Temperature: ' + JSON.stringify(json['current_observation']['temp_f']) + ' F');
                $('#location')
                .text('Location: '+ JSON.stringify(json['current_observation']['display_location']['full']));
                $('#weather')
                .text('Weather: ' + JSON.stringify(json['current_observation']['weather']));
                input.val("");
            })
        });
    })();

jQuery在第一次API调用时工作正常。

GET https://api.wunderground.com/api/3b411ca908826af8/conditions/q/70118.json

但是，第二个API调用没有。

GET https://api.wunderground.com/api/3b411ca908826af8/conditions/q/70118.json06840.json

问题似乎在于我声明weatherByZip变量的方式：

var weatherByZip = wundergroundAPI += inputValue += '.json';

我的意图是每次调用函数时都会更新weatherByZip变量（使用新的inputValue加上.json扩展名）。相反的是，inputValue和.json被附加到先前创建的变量的末尾。

70118.json06840.json
70118.json06840.json90210.json

我如何修复我的jQuery函数以纠正这个问题。也就是说，每次调用该函数（单击一个按钮元素）时，都会发生新的/更新的API调用？

Answer 1

将+ =更改为+

var weatherByZip = wundergroundAPI + inputValue + '.json';

wundergroundAPI + = inputValue表示：获取wundergroundAPI的现有值并在其后面连接inputValue的值。这就是你的wundergroundAPI持续变长的原因。

Answer 2

 var inputValue = input.val();
 var weatherByZip = wundergroundAPI + inputValue + '.json';

更安全的是修剪inputValue，以便在用户添加空格时删除空格。

 var inputValue = input.val().trim();

但是，知道它在IE8中不受支持。你需要一个polyfill。

编辑：正如@Kevin B所提到的， jQuery 提供了一种适用于所有平台的修剪方法。如果您需要支持IE8-或者不想复制/粘贴polyfill，请使用它，如下所示：

var inputValue = $.trim(input.val());

jQuery .on（＆＃39;点击＆＃39;）API调用的问题

2 个答案: