我有一个任务，我需要通过 ajax 调用一个 *.KML 文件并解析它以将点放在开放图层 map 上。到目前为止，这是我设法做到的，没有错误，它只是在单击按钮时刷新页面。您能指导我解决我做错的事情吗？
$('#get-myData').click(function() {
$.ajax({
url: 'C:\..\kmlFile\2015-05-11_141102_imt2015.kml',
dataType: 'html',
success: function(data) {
console.log(data);
var Google = new google.maps.LatLng(37.42228990140251, -122.0822035425683);
var mapOptions = {
zoom: 18,
center: Google
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var geoXml = new geoXML3.parser({
map: map
});
geoXml.parseKmlString(date);
ctaLayer.setMap(map);
console.log(data);
}
});
}); < /script><body>
<form runat="server">
<input id="get-myData" type="submit" value="Click Me" />
</form>
</body>您可能已经注意到，我正在从本地文件夹中获取文件。
最佳答案
it just refresh the page on button click.
您可以使用preventDefault()来停止页面刷新。
$('#get-myData').click(function(ev) {//ev is the event
ev.preventDefault();//Prevent default action
.....
编辑
您还可以通过将 button 从 type=submit 更改为 type button 来阻止刷新。
<input id="get-myData" type="button" value="Click Me" />
^^^^^^^^^^^^
还有一个解决方案是返回 false 就像
$('#get-myData').click(function() {
$.ajax({
url: 'C:\..\kmlFile\2015-05-11_141102_imt2015.kml',
dataType: 'html',
success: function(data) {
console.log(data);
var Google = new google.maps.LatLng(37.42228990140251, -122.0822035425683);
var mapOptions = {
zoom: 18,
center: Google
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var geoXml = new geoXML3.parser({
map: map
});
geoXml.parseKmlString(date);
ctaLayer.setMap(map);
console.log(data);
}
});
return false; //HERE
});
但是，我觉得 preventDefault 比 return false 更好，因为它更能表明你的意图。
关于javascript - 在按钮上点击调用一个js文件并解析它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30548396/