点击事件仅在第二次点击后显示数据

时间:2018-11-16 06:55:20

标签: javascript jquery

我正在查看jQuery.ajax()方法以在var d中存储一段JSON数据。我在控制台中注意到,单击初始按钮后,存储了var,但是直到第二次单击时它才显示。有人可以详细说明并提出解决方案吗?

    var d;
    $(document).ready(function () {
        $('#Weather').click(function () {
            var requestData = $('#City').val() + ',' + $('#Country').val();
            var unit = 'imperial';
            var key = '..........................';
            $.ajax({
                url: 'http://api.openweathermap.org/data/2.5/weather',
                method: 'get',
                data: { q: requestData, units: unit, APPID: key },
                dataType: 'json',
                success: function (data) {
                    d = data.main.temp;
                }
            });
            if (d >= 40) {
                document.getElementById("Text").value = "Value = " + d + " °";
            }
            else if (d < 40) {
                document.getElementById("Text1").value = "Value = " + d + " °";
            }
        });
    });

    <table>
    <tr>
        <td>Enter City</td>
        <td><input type="text" id="City" /></td>
    </tr>
    <tr>
        <td>Enter Country</td>
        <td><input type="text" id="Country" /></td>
    </tr>
</table>
<button id="Weather" >Get d</button>
<input type="text" id="Text" value="T °" />
<input type="text" id="Text1" value="T °" />

这是JSON

    "main": {
    "temp": 37.38,
    "pressure": 1030,
    "humidity": 36,
    "temp_min": 35.06,
    "temp_max": 39.2
},

谢谢。

1 个答案:

答案 0 :(得分:1)

在AJAX调用之外使用 if / else 时,它将在发送调用后立即执行,即d未定义 ,然后这两个条件均失败。

因此,由于d的值到那时已更新,因此在成功回调中移动 if / else

$('#Weather').click(function () {
            var requestData = $('#City').val() + ',' + $('#Country').val();
            var unit = 'imperial';
            var key = '..........................';
            $.ajax({
                url: 'http://api.openweathermap.org/data/2.5/weather',
                method: 'get',
                data: { q: requestData, units: unit, APPID: key },
                dataType: 'json',
                success: function (data) {
                    d = data.main.temp;
                    if (d >= 40) {
                        document.getElementById("Text").value = "Value = " + d + " °";
                     }
                     else if (d < 40) {
                        document.getElementById("Text1").value = "Value = " + d + " °";
                     }
                }
            });

        });