我遇到了API,发现自己被某些东西挡住了。
我有一个从API提取数据的Jquery函数,并且为了不产生“重新定位”效果,我需要该函数等待所有调用之后才能触发另一个将所有api日期放置到位的函数。
我尝试使用AjaxStart和AjaxStop,但是虽然第一个可以完美运行,但是第二个却不能,而且我不知道为什么...
我正在构建的应用程序很大,所以我制作了一个CodePen来简化我的问题:
HTML:
<div id="button"></div>
<div id='locationbox'>
<span id='city'>Get the country</span>
<img id = "countryimg" src="">
<div id='searching'> searching...</div>
</div>
的CSS
#button{
height : 150px;
width : 150px;
border : 5px solid black;
border-radius : 50%;
position : absolute;
top : 45%;
left : 45%;
}
#locationbox{
text-align : center;
width : 300px;
position : absolute;
top : 25%;
left : 38.5%;
}
JavaScript:
$("#button").on('click',function(){
getCity();
});
$(document).ajaxStart(function() {
$("#city").html("fetching data");
});
$(document).ajaxStop(function() {
$("#searching").html("Success")
});
function getCity(){
$.ajax({
datatype : "json",
contentType : "application/json",
type : "GET",
url : "https://nominatim.openstreetmap.org/reverse?",
data : {
format:"json",
lat :"50.8503",
lon : "4.3517",
zoom:"18",
adressdetails:"1"
},
success : function(quote){
var city = quote.address.city;
var country = quote.address.country
var countryCode = quote.address.country_code.toUpperCase()
document.getElementById("city").innerHTML = city + " , " + country;
document.getElementById("countryimg").src = "http://www.geognos.com/api/en/countries/flag/" + countryCode + ".png";
document.getElementById("country").innerHTML = country;
},
error : document.getElementById("city").innerHTML = "error!"
});
};
正如您在AaaxStart触发时在this code pen中看到的那样,AjaxStop不会。感谢您的阅读,也感谢大家对我的帮助。
最佳答案
这是由于成功代码块中的错误而发生的。由于这个错误,您的ajaxStop无法执行。
删除行document.getElementById("country").innerHTML = country;
,因为文档中没有具有该ID的元素。否则,添加ID为country
的元素
检查工作码笔https://codepen.io/anon/pen/NyjMOQ