Javascript 使用字段完成API调用（黑暗天空预测API）

因此，我一直在玩弄黑暗天空预测API，我能够得到我自己的位置的天气显示在网页上。然而，我硬编码了经度和纬度，我想让用户输入自己的经度和纬度。这就是它停止工作的地方

之前我的代码只是

                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
                <script>
                //Waits until document is ready to run
                jQuery(document).ready(function($) {
                    //Beginning of code
                    //Makes the request
                    $.ajax({
                    url : "https://api.darksky.net/forecast/MyKey/1111,-1111+?exclude=minutely,hourly,daily,alerts,flags",
                    dataType : "jsonp",
                    success : function(parsed_json) {
                    var location = parsed_json['timezone'];
                    var temp_f = parsed_json['currently']['temperature'];
                    var complete = ("Current temperature in " + location + " is: " + temp_f);
                    $('#random').html("<h1>" + complete + "</h1>")
                    }
                    });
                    }
                });

                </script>

                    $('#search').click(getInfo);
                });

                </script>

//等待文档准备好运行
jQuery（文档）.ready（函数（$）{
//代码开头
//提出请求
$.ajax({
url:“https://api.darksky.net/forecast/MyKey/1111，-1111+？排除=每分钟、每小时、每天、警报、标志“，
数据类型：“jsonp”，
成功：函数（已解析的_json）{
var location=parsed_json['timezone']；
var temp_f=parsed_json['current']['temperature']；
var complete=（“+位置+”中的当前温度为：“+温度”；
$（'#random'）.html（“+complete+”）
}
});
}
});
$（“#搜索”）。单击（获取信息）；
});

然后我创建了一些HTML字段（我使用bootstrap只是为了保持整洁），如下所示

                        <div class="input-group input-group-lg">
                        <input id="long" type="text" class="form-control" placeholder="Longitude" aria-describedby="sizing-addon1">
                    </div>

                    <div class="input-group input-group-lg">
                        <input id="lat" type="text" class="form-control" placeholder="Latitude" aria-describedby="sizing-addon1">
                    </div>

                    <div class="rand">
                    <button class="btn btn-primary btn-lg" role="button" id="search">Find my location and temperature!</button>
                    </div>

                     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
                <script>
                //Waits until document is ready to run
                jQuery(document).ready(function($) {
                    //Beginning of code

                    var getInfo = function(){
                        //Grabs the longitude and latitude
                        var Longitude = $('#long').val();
                        var Latitude = $('#lat').val();
                        //Makes the request
                        $.ajax({
                        url : "https://api.darksky.net/forecast/mykey/" + Longitude + ","+ Latitude + "+?exclude=minutely,hourly,daily,alerts,flags",
                        dataType : "jsonp",
                        success : function(parsed_json) {
                        var location = parsed_json['timezone'];
                        var temp_f = parsed_json['currently']['temperature'];
                        var complete = ("Current temperature in " + location + " is: " + temp_f);
                        $('#random').html("<h1>" + complete + "</h1>")
                        }
                        });
                    }

                    $('#search').click(getInfo);
                });

找到我的位置和温度！

我更新了脚本，使其看起来像这样

                        <div class="input-group input-group-lg">
                        <input id="long" type="text" class="form-control" placeholder="Longitude" aria-describedby="sizing-addon1">
                    </div>

                    <div class="input-group input-group-lg">
                        <input id="lat" type="text" class="form-control" placeholder="Latitude" aria-describedby="sizing-addon1">
                    </div>

                    <div class="rand">
                    <button class="btn btn-primary btn-lg" role="button" id="search">Find my location and temperature!</button>
                    </div>

                     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
                <script>
                //Waits until document is ready to run
                jQuery(document).ready(function($) {
                    //Beginning of code

                    var getInfo = function(){
                        //Grabs the longitude and latitude
                        var Longitude = $('#long').val();
                        var Latitude = $('#lat').val();
                        //Makes the request
                        $.ajax({
                        url : "https://api.darksky.net/forecast/mykey/" + Longitude + ","+ Latitude + "+?exclude=minutely,hourly,daily,alerts,flags",
                        dataType : "jsonp",
                        success : function(parsed_json) {
                        var location = parsed_json['timezone'];
                        var temp_f = parsed_json['currently']['temperature'];
                        var complete = ("Current temperature in " + location + " is: " + temp_f);
                        $('#random').html("<h1>" + complete + "</h1>")
                        }
                        });
                    }

                    $('#search').click(getInfo);
                });

//等待文档准备好运行
jQuery（文档）.ready（函数（$）{
//代码开头
var getInfo=function（）{
//获取经度和纬度
变量经度=$（'#long'）.val（）；
变量纬度=$（'#lat'）.val（）；
//提出请求
$.ajax({
url:“https://api.darksky.net/forecast/mykey/“+经度+”、“+纬度+”+？排除=分钟、小时、每日、警报、标志”，
数据类型：“jsonp”，
成功：函数（已解析的_json）{
var location=parsed_json['timezone']；
var temp_f=parsed_json['current']['temperature']；
var complete=（“+位置+”中的当前温度为：“+温度”；
$（'#random'）.html（“+complete+”）
}
});
}
$（“#搜索”）。单击（获取信息）；
});

然而，在这一点上，它就是不起作用。我点击我的按钮，什么也没发生。也许我在HTML部分做错了什么，因为我几乎没有对脚本做任何更改，所以我猜这不是问题所在

---

非常感谢你

没关系，我明白了。我做的每件事都是对的，我不小心在url中加了一个加号。。。哎呀